/* ============================================================
   wwwroot/css/traslado-web-descuento.css
   Codigo de descuento en el paso 4 del wizard . lote C3.b

   Fichero APARTE, no se toca traslado-web.css. Mismo criterio que
   traslado-web-franja.css y traslado-web-servicios.css: si algun dia
   el modulo de descuentos se apaga, se quita el <link> y no queda ni
   una regla huerfana en la hoja grande.

   Todas las clases llevan prefijo tw-dto- salvo las que ya existen en
   el wizard (tw-campo, tw-label, tw-input, tw-hint, tw-resumen__linea),
   que solo se MATIZAN con un modificador.
   ============================================================ */

:root {
    --tw-dto-teal  : #008572;
    --tw-dto-gold  : #dfbb3e;
    --tw-dto-ko    : #b91c1c;
    --tw-dto-borde : #E5E7EB;
    --tw-dto-suave : #F8FAFC;
}

/* ── El campo ────────────────────────────────────────────── */
.tw-campo--dto {
    margin-top: 1.1rem;
    padding-top: 1.1rem;
    border-top: 1px dashed var(--tw-dto-borde);
}

.tw-campo--dto .tw-label i {
    margin-right: .35rem;
    color: var(--tw-dto-teal);
}

/* El campo y los botones en la misma fila, y en columna en movil. */
.tw-dto-fila {
    display: flex;
    gap: .5rem;
    align-items: stretch;
    flex-wrap: wrap;
}

.tw-dto-fila .tw-input {
    flex: 1;
    min-width: 180px;

    /* *** SIN text-transform: uppercase. ***
       El codigo distingue mayusculas y minusculas: la columna de la base
       lleva COLLATE Modern_Spanish_CS_AS. Poner uppercase aqui ensenaria
       'VERANO26' mientras se manda 'verano26', que es el peor de los dos
       mundos: el cliente no entenderia por que su codigo no existe. */
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: .04em;
}

.tw-dto-fila .tw-input[readonly] {
    background: var(--tw-dto-suave);
    cursor: not-allowed;
}

/* ── Botones ─────────────────────────────────────────────── */
.tw-dto-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .6rem 1.1rem;
    border-radius: 8px;
    border: 1px solid var(--tw-dto-teal);
    background: var(--tw-dto-teal);
    color: #fff;
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    line-height: 1.2;
    white-space: nowrap;
    transition: background .15s, border-color .15s, opacity .15s;
}

.tw-dto-btn:hover:not(:disabled) { background: #006b5c; border-color: #006b5c; }

.tw-dto-btn:disabled { opacity: .55; cursor: not-allowed; }

.tw-dto-btn--quitar {
    background: #fff;
    color: var(--tw-dto-ko);
    border-color: var(--tw-dto-borde);
}

.tw-dto-btn--quitar:hover:not(:disabled) {
    background: #fef2f2;
    border-color: var(--tw-dto-ko);
}

/* ── El mensaje de debajo ────────────────────────────────── */
.tw-dto-msg {
    margin-top: .55rem;
    font-size: .86rem;
    line-height: 1.45;
    display: flex;
    align-items: flex-start;
    gap: .4rem;
    padding: .5rem .7rem;
    border-radius: 8px;
    border: 1px solid var(--tw-dto-borde);
    background: var(--tw-dto-suave);
    color: #475569;
}

.tw-dto-msg--ok {
    background: #ecfdf5;
    border-color: #a7f3d0;
    color: #065f46;
    font-weight: 600;
}

.tw-dto-msg--ko {
    background: #fef2f2;
    border-color: #fecaca;
    color: var(--tw-dto-ko);
    font-weight: 600;
}

.tw-dto-msg--cargando { font-style: italic; }

/* ── La linea del descuento en el resumen ────────────────── */
.tw-resumen__linea--dto span:last-child {
    color: var(--tw-dto-teal);
    font-weight: 700;
    white-space: nowrap;
}

.tw-resumen__linea--dto span:first-child {
    color: var(--tw-dto-teal);
}

/* ============================================================
   *** hidden GANA SIEMPRE ***
   Los botones y el mensaje se abren y se cierran con el atributo
   hidden desde el JS, y .tw-dto-btn es display:inline-flex y
   .tw-dto-msg es display:flex. Sin esta regla el display de la
   clase le gana al hidden del navegador y el boton de quitar
   nace visible sin haber aplicado ningun codigo.

   VA ACOTADA al bloque del descuento a proposito: una regla
   [hidden] global tocaria al resto del wizard.
   ============================================================ */
.tw-dto-btn[hidden],
.tw-dto-msg[hidden] { display: none !important; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 600px) {

    .tw-dto-fila { flex-direction: column; }

    .tw-dto-fila .tw-input { min-width: 100%; }

    .tw-dto-btn { width: 100%; }
}