/* tablero.css - El panel de quien entra.
 *
 * Carlos: "no muestra la información que es relevante para el médico". Mostraba
 * tres ceros grandes y "Aún no hay rutinas".
 *
 * El PESO VISUAL sigue al orden de importancia: los avisos son lo mas grande y
 * lo unico con color fuerte; la cola es una lista de trabajo; y las cifras, que
 * antes ocupaban toda la primera fila, quedan pequenas al final. Un numero que
 * no lleva a ninguna accion no merece estar arriba.
 */

.tb { display: grid; gap: 26px; }

.tb-titulo {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 13px;
    font: 600 19px/1.3 "Noto Serif Display", Georgia, serif;
    color: var(--kctp-tinto, #260514);
}

.tb-titulo i { font-size: .9em; color: var(--kctp-acento, #5b0c2f); }

/* --- Lo pendiente --------------------------------------------------------- */

.tb-avisos { display: grid; gap: 10px; }

.tb-aviso {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 14px;
    padding: 15px 17px;
    border: 1.5px solid var(--kctp-borde, #ebe1e4);
    border-radius: 16px;
    background: var(--kctp-blanco, #fff);
    text-decoration: none;
    color: inherit;
    transition: transform .18s cubic-bezier(.2, .8, .3, 1), border-color .18s ease;
}

.tb-aviso:hover { transform: translateY(-1px); border-color: var(--kctp-borde-f, #dbc9d0); }

.tb-aviso-icono {
    display: grid;
    place-items: center;
    width: 42px; height: 42px;
    border-radius: 12px;
    background: var(--kctp-panel, #f5edef);
    color: var(--kctp-acento, #5b0c2f);
    font-size: 1.15rem;
}

.tb-aviso-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tb-aviso-txt strong { font-size: 15.5px; color: var(--kctp-tinta, #2a1a21); }
.tb-aviso-txt small { font-size: 13px; color: var(--kctp-acento, #5b0c2f); font-weight: 500; }

/* Lo critico se distingue por COLOR, no por tamano: si fuera mas grande, dos
   avisos criticos desplazarian todo lo demas fuera de la pantalla. */
.tb-critico { border-color: #e2b4b4; background: #fdf3f3; }
.tb-critico .tb-aviso-icono { background: #f6dede; color: #a32c2c; }
.tb-critico .tb-aviso-txt small { color: #a32c2c; }

.tb-aldia {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 17px 19px;
    border: 1.5px solid var(--kctp-ok-bd, #c8e6da);
    border-radius: 16px;
    background: var(--kctp-ok-sw, #e9f5f0);
}

.tb-aldia i { font-size: 1.5rem; color: var(--kctp-ok, #1f7a58); }
.tb-aldia strong { display: block; color: var(--kctp-ok, #1f7a58); }
.tb-aldia span { font-size: 14px; color: var(--kctp-tenue, #7e6a73); }

/* --- La cola -------------------------------------------------------------- */

.tb-cola-cab {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.tb-cola-cab .tb-titulo { margin-bottom: 13px; }

.tb-vertodo {
    font-size: 13.5px;
    color: var(--kctp-acento, #5b0c2f);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
}

.tb-lista { display: grid; gap: 8px; }

.tb-caso {
    display: grid;
    grid-template-columns: minmax(140px, 1.1fr) 2fr auto;
    align-items: center;
    gap: 14px;
    padding: 13px 16px;
    border: 1px solid var(--kctp-borde, #ebe1e4);
    border-radius: 14px;
    background: var(--kctp-blanco, #fff);
    text-decoration: none;
    color: inherit;
    transition: transform .16s cubic-bezier(.2, .8, .3, 1), border-color .16s ease;
}

.tb-caso:hover { transform: translateY(-1px); border-color: var(--kctp-borde-f, #dbc9d0); }
.tb-caso-rojo { border-left: 3px solid #a32c2c; }

.tb-caso-quien { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tb-caso-quien strong {
    font-size: 14.5px; color: var(--kctp-tinta, #2a1a21);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tb-caso-quien small { font-size: 12px; color: var(--kctp-tenue-2, #a9989f); }

.tb-caso-motivo {
    font-size: 13.5px;
    line-height: 1.4;
    color: var(--kctp-tenue, #7e6a73);
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.tb-caso-meta { display: flex; align-items: center; gap: 9px; white-space: nowrap; }
.tb-caso-meta small { font-size: 12.5px; color: var(--kctp-tenue, #7e6a73); font-variant-numeric: tabular-nums; }
.tb-tarde { color: #a32c2c !important; font-weight: 600; }

.tb-critica {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: 999px;
    background: #f6dede; color: #a32c2c;
    font-size: 12px; font-weight: 600;
}

.tb-vacio { margin: 0; font-size: 14px; color: var(--kctp-tenue, #7e6a73); }

/* --- Las cifras, al final ------------------------------------------------- */

.tb-cifras { display: flex; flex-wrap: wrap; gap: 10px; }

.tb-cifra {
    flex: 1 1 130px;
    display: flex; flex-direction: column; gap: 1px;
    padding: 13px 16px;
    border: 1px solid var(--kctp-borde, #ebe1e4);
    border-radius: 14px;
    background: var(--kctp-blanco, #fff);
    text-decoration: none;
    color: var(--kctp-tenue, #7e6a73);
    font-size: 13px;
}

.tb-cifra:hover { border-color: var(--kctp-borde-f, #dbc9d0); }
.tb-n {
    font: 600 24px/1.1 "Noto Serif Display", Georgia, serif;
    color: var(--kctp-tinto, #260514);
    font-variant-numeric: tabular-nums;
}

.tb-demo { margin: 0; font-size: 13px; color: var(--kctp-tenue, #7e6a73); }

/* --- Teléfono ------------------------------------------------------------- */

@media (max-width: 720px) {
    /* El motivo se va: en una fila de 360px, tres columnas dejan el nombre en
       dos letras. Se conserva el nombre y el estado, que es lo que permite
       reconocer el caso. */
    .tb-caso { grid-template-columns: 1fr auto; }
    .tb-caso-motivo { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .tb-aviso, .tb-caso { transition: none; }
    .tb-aviso:hover, .tb-caso:hover { transform: none; }
}