/* =============================================================================
   CONTENIDO — tarjetas, tablas y estados
   -----------------------------------------------------------------------------
   Hoja compartida y NO aislada, a propósito: estas clases las usan varios
   componentes de contenido a la vez (Contenido, TablaPacientes, FrmInicio,
   FormularioAdmision). Con aislamiento CSS cada uno necesitaría su copia, y la
   tabla dejaría de verse igual según quién la renderice.

   El cromo sí usa aislamiento: cada pieza del shell es de un solo componente.
   ============================================================================= */

.cont {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    background: var(--surface-canvas);
}

/* ---- Tarjetas --------------------------------------------------------------
   Sin borde ni radio en el ÁREA de contenido: las tarjetas van dentro, no
   alrededor. Un marco sobre otro marco es lo que hace que una pantalla se vea
   con más cajas que datos.                                                   */
.tarjeta {
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-container);
    padding: 12px;
}

.rejilla {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 12px;
}

.ancho-12 { grid-column: span 12; }

.seccion-titulo {
    font-size: 15px;
    color: var(--text-1);
    margin-bottom: 12px;
}

/* ---- KPI ------------------------------------------------------------------- */
.rejilla > .kpi { grid-column: span 3; }

.kpi-rotulo {
    font-size: 10px;
    letter-spacing: .11em;
    color: var(--text-3);
}

.kpi-valor {
    font-size: 18px;
    color: var(--text-1);
    margin: 4px 0 2px;
}

.kpi-nota { font-size: 11px; color: var(--text-2); }

@media (max-width: 1100px) {
    .rejilla > .kpi { grid-column: span 6; }
}

/* ---- Formulario ------------------------------------------------------------ */
.form-rejilla {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}

/* ---- Tablas ---------------------------------------------------------------- */
.tbl-cont {
    border: 1px solid var(--border);
    border-radius: var(--radius-container);
    overflow: hidden;
    background: var(--surface-1);
}

.tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.tbl th {
    height: 32px;
    padding: 0 10px;
    background: var(--surface-2);
    color: var(--text-2);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-align: left;
}

.tbl td {
    height: 36px;
    padding: 8px 10px;
    border-top: 1px solid var(--border);
    color: var(--text-1);
}

/* Sin zebra: con filas de 36px y un borde superior por fila, el rayado agrega
   ruido sin ayudar a seguir el renglón. */
.tbl tbody tr { cursor: pointer; }
.tbl tbody tr:hover { background: var(--surface-2); }

.tbl tbody tr.is-sel {
    background: color-mix(in srgb, var(--accent) 12%, var(--surface-1));
    position: relative;
}

.tbl tbody tr.is-sel td:first-child { box-shadow: inset 2px 0 0 var(--accent); }

.en-acento { color: var(--accent); }

.der { text-align: right; font-variant-numeric: tabular-nums; }

.tbl .dato { font-size: 11px; }

.pill {
    display: inline-block;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    background: var(--surface-2);
    color: var(--text-2);
}

/* ---- Estado: cargando ------------------------------------------------------
   Esqueletos con la FORMA real del contenido. Un girador centrado no dice nada
   sobre lo que viene y deja que la página salte al llegar los datos.        */
.hueso {
    background: var(--surface-2);
    border-radius: var(--radius-control);
    animation: hueso-latir 1.4s ease-in-out infinite;
}

.hueso--titulo { height: 20px; width: 40%; margin-bottom: 12px; }
.hueso--fila { height: 36px; margin-bottom: 6px; }

@keyframes hueso-latir {
    50% { opacity: .55; }
}

@media (prefers-reduced-motion: reduce) {
    .hueso { animation: none; }
}

/* ---- Estados vacío y error -------------------------------------------------
   Alineados a la IZQUIERDA. Centrado se lee como una pantalla de error del
   sistema; a la izquierda se lee como parte de la aplicación esperando algo.  */
.estado {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 32px 4px;
    max-width: 460px;
}

.estado-icono { color: var(--text-3); }
.estado-icono--error { color: var(--error); }

.estado-titulo {
    font-size: 13px;
    color: var(--text-1);
}

.estado-texto {
    font-size: 11.5px;
    color: var(--text-2);
}

.estado-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    margin-top: 4px;
    padding: 0 12px;
    border-radius: var(--radius-control);
    background: var(--action-bg);
    color: var(--action-fg);
    font-size: 12px;
}

.estado-btn:hover { opacity: .9; }