/*
 * Hoja de estilos de ConserjeEnLínea.
 *
 * Vivía como un bloque <style> de 110 líneas dentro de
 * partials/bootstrap-head.blade.php, o sea dentro del <head> de cada
 * página: el navegador lo volvía a descargar en cada navegación, sin
 * poder cachearlo nunca. Como archivo aparte se descarga una sola vez
 * y queda en caché; bootstrap-head lo enlaza con ?v=<filemtime>, así
 * que al editarlo la URL cambia sola y nadie se queda con la versión
 * vieja.
 *
 * Es CSS plano servido desde public/, sin paso de compilación: el
 * proyecto no tiene pipeline de assets (ver el docblock de
 * bootstrap-head sobre el mismo criterio para Bootstrap y Chart.js).
 * Editar este archivo es lo único que hace falta para que el cambio
 * llegue a producción.
 *
 * Paleta: cian, el color del proyecto original — este sistema no tiene
 * relación con Khipu ni con su identidad visual, así que no se usa acá
 * ningún otro color de marca ni se nombran clases/variables con
 * "khipu" (de ahí el sufijo "cel", de "ConserjeEnLínea"). Los usos de
 * la palabra "Khipu" que quedan en otras vistas corresponden a la
 * pasarela de pago real integrada desde la Fase 4, no a la marca.
 *
 * --brand-primary es el cian principal, elegido para que el texto
 * blanco encima (botones, navbar) cumpla contraste AA (>= 4.5:1).
 * --brand-primary-light es el cian más brillante/original, de uso
 * puramente decorativo (no como fondo de texto).
 */

/*
 * Fase 79 (Jorge: "me encantaron [los mockups], sería genial que el
 * sitio se visualizara así"): la marca pasa del cian al índigo-violeta
 * del mockup aprobado. Mismo criterio de contraste: --brand-primary
 * (indigo) da >= 4.5:1 con texto blanco encima. Para volver al cian
 * basta restaurar estas tres variables (#147399 / #0D4A63 / #3CB4E5).
 */
:root {
    --brand-primary: #4f46e5;
    --brand-primary-dark: #3730a3;
    --brand-primary-light: #818cf8;

    /* Superficies del tema (Fase 79): fondo de página frío muy claro,
       sidebar oscuro y sombras suaves y difusas, como el mockup. */
    --superficie-pagina: #f4f5fa;
    --sidebar-fondo: #14172b;
    --sidebar-texto: #a7adc9;
    --sidebar-titulo: #6d7394;
    --sombra-tarjeta: 0 4px 24px rgba(20, 23, 43, .07);

    /* .text-muted de Bootstrap salia #6c757d, que sobre el fondo gris de
       la app (#f5f6fa) da 4.34:1 — bajo el 4.5:1 que WCAG pide para
       texto normal. Se redefine la variable de Bootstrap en vez de pisar
       la clase con !important, asi el cambio alcanza tambien a .form-text
       y al resto de los textos secundarios. Queda en 4.87:1 sobre el
       fondo de la app y 5.26:1 sobre una tarjeta blanca. */
    --bs-secondary-color: #646d76;

    /* Un color por categoría de cargo del gasto común. Cada par se usa
       junto: el tono fuerte para el ícono o el texto, el "-soft" como
       fondo detrás de ese tono. Estos valores estaban escritos a mano,
       en hexadecimal, dentro de atributos style= repartidos por las
       vistas de composición del gasto (más de 40 veces entre
       gasto-comun/show y admin/unidad/show), lo que hacía imposible
       cambiar el color de una categoría sin ir a buscarlo pantalla por
       pantalla. */
    --color-cyan: #177796;      --color-cyan-soft: #e4f5fc;      /* consumo */
    --color-green: #177c40;     --color-green-soft: #e5f7ee;     /* fondo de reserva, pagado */
    --color-amber: #8f5b00;     --color-amber-soft: #fde9c7;     /* FRO, pendiente */
    --color-rose: #b03052;      --color-rose-soft: #fbe3e6;      /* multas */
    --color-red: #c0392b;       --color-red-soft: #fde8e8;       /* recargos por mora */
    --color-indigo: #4c4fd1;    --color-indigo-soft: #e3e6fc;    /* gasto extraordinario */
    --color-purple: #6d4a94;    --color-purple-soft: #f5f2fa;    /* período estimado */
    --color-slate: #55636e;     --color-slate-soft: #eef1f4;     /* gasto común base */
    --color-yellow: #FFC94A;                                     /* acento sobre fondo oscuro */

    /* Superficies sueltas, fuera del juego de categorías. */
    --surface-muted: #fafbfc;   /* fila resaltada dentro de una tabla */
    --surface-info: #eef4f7;    /* bloque informativo */
}
body { background: var(--superficie-pagina); font-family: 'Inter', 'Segoe UI', system-ui, sans-serif; }

/* Header (residente/administrador) */
.navbar-cel { background: linear-gradient(90deg, var(--brand-primary), var(--brand-primary-dark)); }
.navbar-cel .navbar-brand, .navbar-cel .nav-link { color: #fff !important; }
.navbar-cel .nav-link:hover { color: #dbd8fb !important; }
.navbar-cel .nav-link.active { background: rgba(255,255,255,.15); border-radius: .375rem; }
.navbar-cel .navbar-brand span.accent { color: rgba(255,255,255,.8); }
.badge-comunidad { background: rgba(255,255,255,.92); color: var(--brand-primary); }

/* Botones/enlaces */
.btn-cel { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }
.btn-cel:hover, .btn-cel:focus { background: var(--brand-primary-dark); border-color: var(--brand-primary-dark); color: #fff; }
.btn-outline-cel { border-color: var(--brand-primary); color: var(--brand-primary); }
.btn-outline-cel:hover { background: var(--brand-primary); color: #fff; }
a.link-cel { color: var(--brand-primary); text-decoration: none; }
a.link-cel:hover { text-decoration: underline; }
.bg-cel { background: var(--brand-primary); color: #fff; }

/* Tarjetas — radios grandes y sombra difusa (Fase 79, mockup aprobado) */
.card-panel, .card-stat { border: none; border-radius: 1rem; box-shadow: var(--sombra-tarjeta); }
/* Corrección (encontrado al reusar esta clase en Gastos comunes, Fase
   20): esta regla estaba anclada a ".card-stat .icon-wrap", pero
   "card-stat" nunca se aplicó de verdad como clase en ningún lado del
   proyecto (Home, admin-home y Mis pagos siempre usan ".card-panel",
   no ".card-stat") — así que el círculo de 48px con ícono centrado
   nunca se dibujó en producción; el ícono siempre se vio "pelado",
   sin el fondo redondeado que el diseño de esas pantallas muestra en
   sus mockups. Se saca el anclaje a ".card-stat" para que aplique
   donde sea que se use ".icon-wrap", que es como ya se usaba en la
   práctica en las 3 pantallas mencionadas. */
.icon-wrap { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; }
.bg-cyan-soft { background: var(--color-cyan-soft); color: var(--color-cyan); }
.bg-green-soft { background: var(--color-green-soft); color: var(--color-green); }
.bg-slate-soft { background: var(--color-slate-soft); color: var(--color-slate); }
.bg-amber-soft { background: var(--color-amber-soft); color: var(--color-amber); }
.bg-red-soft { background: var(--color-red-soft); color: var(--color-red); }
.bg-indigo-soft { background: var(--color-indigo-soft); color: var(--color-indigo); }
.bg-purple-soft { background: var(--color-purple-soft); }

/* Tarjeta destacada del período más reciente de "Gastos comunes"
   (Fase 20) — mismo lenguaje visual aprobado en
   bootstrap-preview/mocks/gastos-comunes-propuesta.html. */
.card-destacada {
    border: none; border-radius: 1rem; color: #fff;
    background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);
    box-shadow: 0 10px 30px rgba(49,46,129,.28);
}
.card-destacada .badge-pagado { background: rgba(255,255,255,.92); color: var(--color-green); }

/* Piezas de la tarjeta destacada, compartidas por el panel de inicio y
   la pantalla de Gastos comunes: el monto grande, la etiqueta que lo
   encabeza y el bloque de deuda acumulada. Estaban como style= inline
   en gasto-comun/index; al reusarlas en el panel de inicio pasan a ser
   clases, para que ambas pantallas no se separen con el tiempo. */
.monto-destacado { font-size: 2.25rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.etiqueta-destacada { letter-spacing: .04em; }
.bloque-alerta-destacada { background: rgba(255,255,255,.14); border-left: 4px solid var(--color-yellow); }
.monto-alerta-destacada { font-size: 1.35rem; }
.card-destacada .badge-pendiente { background: #FFC94A; color: #5c3d00; }

/* Tarjeta de alerta — saldo pendiente resaltado en el detalle de
   "Gastos comunes" (antes un card genérico sin ningún énfasis). */
.card-alerta { border: none; border-radius: .8rem; background: #fff8ec; border-left: 4px solid #f0a93a; }

/* Sidebar del panel de administrador — oscuro desde la Fase 79 (mockup
   aprobado por Jorge). El panel oscuro es .admin-sidebar mismo, así se
   ve igual en la columna de escritorio y dentro del offcanvas móvil. */
.admin-sidebar {
    background: var(--sidebar-fondo);
    border-radius: 1rem;
    padding: .85rem .65rem;
    box-shadow: var(--sombra-tarjeta);
    /* .text-muted de Bootstrap lleva !important y usa esta variable:
       redefinirla acá adentro es lo que hace legibles los títulos de
       sección y las notas sobre el fondo oscuro, sin pelear
       especificidad regla por regla. */
    --bs-secondary-color: var(--sidebar-titulo);
}
.admin-sidebar h6 { color: var(--sidebar-titulo); }
.admin-sidebar .nav-link { color: var(--sidebar-texto); border-radius: .6rem; }
.admin-sidebar .nav-link.active { background: var(--brand-primary); color: #fff; }
.admin-sidebar .nav-link:hover:not(.active) { background: rgba(255,255,255,.07); color: #fff; }

/* Botón de colapso del menú (Fase 79, Jorge: "que sean íconos, y al
   pasar encima indique el nombre... al expandir que muestre todo").
   Solo existe en escritorio: en móvil el menú ya es un offcanvas. */
.btn-colapsar-menu {
    display: none;
    background: rgba(255,255,255,.07); border: 0; color: var(--sidebar-texto);
    border-radius: .6rem; width: 100%; padding: .4rem; margin-bottom: .5rem;
}
.btn-colapsar-menu:hover { color: #fff; background: rgba(255,255,255,.12); }

@media (min-width: 992px) {
    .btn-colapsar-menu { display: flex; align-items: center; justify-content: center; gap: .4rem; font-size: .8rem; }

    /* Colapsado: rail de íconos. El texto de cada link se anula con
       font-size 0 (los links tienen el texto suelto junto al ícono) y
       el nombre se muestra como tooltip nativo — el JS del layout le
       pone `title` a cada link con su propio texto. */
    body.menu-colapsado .col-menu-admin { flex: 0 0 96px; width: 96px; max-width: 96px; }
    body.menu-colapsado #contenido { flex: 1 1 0; width: auto; max-width: none; }
    body.menu-colapsado .admin-sidebar h6 { display: none; }
    body.menu-colapsado .admin-sidebar .mb-3 { margin-bottom: .35rem !important; border-top: 1px solid rgba(255,255,255,.08); padding-top: .35rem; }
    body.menu-colapsado .admin-sidebar .mb-3:first-child { border-top: 0; padding-top: 0; }
    body.menu-colapsado .admin-sidebar .nav-link { font-size: 0; display: flex; justify-content: center; padding: .55rem 0; }
    body.menu-colapsado .admin-sidebar .nav-link i { font-size: 1.15rem; margin: 0 !important; }
    body.menu-colapsado .admin-sidebar .nav-link span { display: none; }
    body.menu-colapsado .admin-sidebar span.px-2 { display: none; }
    body.menu-colapsado .btn-colapsar-menu .texto-colapsar { display: none; }
    body.menu-colapsado .btn-colapsar-menu i { transform: rotate(180deg); }
}

/* Cifra grande de las tarjetas KPI del dashboard (Fase 79). */
.kpi-cifra { font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.kpi-subtitulo { font-size: .8rem; color: var(--color-green); font-weight: 600; }

/* Logo placeholder (Fase 14) */
.logo-wordmark { font-weight: 800; font-size: 1.15rem; letter-spacing: -.02em; white-space: nowrap; }
.logo-wordmark .accent { color: var(--brand-primary); }

/* Fase 30 — "Composición del gasto común": cadena de íconos + monto
   por categoría, unidos por "+" hasta un total destacado, usada en
   la pantalla de Gastos comunes del residente y en la ficha de
   unidad del admin (mismo lenguaje visual en ambas, a pedido de
   Jorge: "usa la imagen adjunta como referencia... lo mismo en la
   sección del admin"). bg-rose-soft es nuevo (para "Multas"); los
   demás bg-*-soft de categoría ya existían para otras pantallas. */
.bg-rose-soft { background: var(--color-rose-soft); color: var(--color-rose); }

.cadena-composicion { display: flex; align-items: center; flex-wrap: wrap; gap: .25rem .1rem; }
/* Cada eslabon de la cadena y cada chip "Ver detalle" son <button>, no
   <div>/<span> con role="button": asi se alcanzan con Tab y se activan
   con Enter o Espacio sin JS de por medio (antes solo respondian al
   clic del mouse). Los reset de background/border/color/font dejan al
   boton con exactamente el mismo aspecto que tenia antes. */
.item-cadena { display: flex; flex-direction: column; align-items: center; text-align: center; width: 112px; padding: .25rem; background: none; border: 0; color: inherit; font-family: inherit; }
.item-cadena .circulo { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; margin-bottom: .4rem; }
.item-cadena .etiqueta { font-size: .75rem; color: #6b7480; line-height: 1.15; min-height: 2.1em; }
.item-cadena .monto { font-weight: 700; font-size: .95rem; }
.conector-mas { font-size: 1.4rem; font-weight: 300; color: #c3c9d1; padding: 0 .15rem; }
/* Fase 42-c: mismo tamaño que "+"/"=" pero verde, para que un
     crédito se distinga a simple vista como lo único que RESTA en
     la cadena de composición (todo lo demás siempre suma). */
.conector-menos { font-size: 1.4rem; font-weight: 600; color: #1f9d55; padding: 0 .15rem; }
.conector-igual { font-size: 1.4rem; font-weight: 600; color: var(--brand-primary); padding: 0 .15rem; }
.total-chip { background: #eceafd; border: 2px solid var(--brand-primary); border-radius: .9rem; padding: .7rem 1.15rem; text-align: center; min-width: 150px; }
.total-chip .etiqueta { font-size: .75rem; color: var(--brand-primary-dark); text-transform: uppercase; letter-spacing: .03em; }
.total-chip .monto { font-size: 1.5rem; font-weight: 800; color: var(--brand-primary-dark); }

/* Tabla de conceptos SIN columna "Detalle" (Jorge: "no agregues la
   columna detalle... pero en cada sección se debe abrir un modal") —
   cada fila es clickeable (data-bs-toggle="modal") y abre el modal
   con el desglose línea por línea de esa categoría. */
.tabla-conceptos tr.fila-concepto { cursor: pointer; }
.tabla-conceptos tr.fila-concepto:hover { background: #f6f6fd; }
.chip-ver-detalle { font-size: .75rem; color: var(--brand-primary); border: 1px solid #d8d5f8; border-radius: 1rem; padding: .1rem .55rem; white-space: nowrap; background: none; font-family: inherit; }

/* Foco visible propio: el outline por omision del navegador cambia de
   un navegador a otro y sobre estos fondos claros a veces casi no se
   ve. Con :focus-visible solo aparece al navegar con teclado, no al
   hacer clic con el mouse. */
.item-cadena:focus-visible, .chip-ver-detalle:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; border-radius: .5rem; }
.tabla-conceptos tr.fila-concepto:hover .chip-ver-detalle { background: var(--brand-primary); color: #fff; border-color: var(--brand-primary); }

/* Pantallas de acceso (ingreso, olvide mi contrasena, definir
   contrasena). Estaba triplicado como <style> en las 3 vistas y desde
   el punto 1 vivia en un @push del layout de auth; aca queda junto al
   resto del sistema visual. La clase la pone layouts/auth en el <body>
   (@section('claseBody')). */
.pagina-acceso { min-height: 100vh; background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%); display: flex; align-items: center; }
.pagina-acceso .login-card { border: none; border-radius: 1rem; box-shadow: 0 12px 40px rgba(0,0,0,.25); }
.pagina-acceso .logo-wordmark .accent { color: #fff; opacity: .85; }

/* Color de texto por categoría, para los títulos de modal y los montos
   que antes lo llevaban como style="color:#..." en la vista. */
.text-cyan-cel { color: var(--color-cyan); }
.text-green-cel { color: var(--color-green); }
.text-amber-cel { color: var(--color-amber); }
.text-rose-cel { color: var(--color-rose); }
.text-red-cel { color: var(--color-red); }
.text-indigo-cel { color: var(--color-indigo); }
.text-purple-cel { color: var(--color-purple); }
.text-yellow-cel { color: var(--color-yellow); }

/* De las cuatro tarjetas del panel de administración, "Mora total" es la
   única sobre la que se puede actuar: las otras tres son informativas.
   Un borde de acento a la izquierda la distingue sin romper la simetría
   de la fila. Va después de .card-panel a propósito: esa clase declara
   border:none y acá se necesita que este borde gane. */
.card-kpi-accionable { border-left: 4px solid var(--color-rose); }

/* Disparador del menú del panel en móvil. Como btn-sm quedaba en 31x32px
   y solo se toca con el pulgar, se fuerza el mínimo cómodo de 44px que
   piden tanto WCAG (2.5.5) como las guías de iOS y Android. */
.btn-menu-movil { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

/* La cadena de composicion puede llegar a 8 eslabones de 112px: mas de
   900px. Al envolverse en una pantalla angosta, los conectores "+" y "="
   quedaban colgando al inicio de la linea siguiente, separados de los
   dos montos que unen, y la suma dejaba de leerse como suma. Bajo `md`
   se mantiene en una sola linea con scroll horizontal propio: se sigue
   leyendo como cadena, de izquierda a derecha. */
@media (max-width: 767.98px) {
    .cadena-composicion { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .5rem; }
    .cadena-composicion > * { flex: 0 0 auto; }
}

/* Salto al contenido: primer elemento del <body>, invisible hasta que
   recibe el foco. Sin el, alguien que navega con teclado tiene que pasar
   por el header y por los ~30 links del menu del panel en CADA pantalla
   antes de llegar a lo que vino a hacer. Apunta al <main id="contenido">
   que ya tienen los cuatro layouts. */
.salto-contenido {
    position: absolute; left: -9999px; top: 0; z-index: 2000;
    background: #fff; color: var(--brand-primary); font-weight: 600;
    padding: .65rem 1.1rem; border-radius: 0 0 .5rem 0;
    box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
.salto-contenido:focus { left: 0; }

/* Logos de medios de pago (Fase 70): la altura la fija cada contexto en
   linea; el tope de ancho evita que un logo panoramico tipo banner
   estire el boton de pago. object-fit conserva la proporcion. */
.logo-medio {
    max-width: 7rem;
    object-fit: contain;
}

/* Toasts flotantes (Fase 79, mockup aprobado): el script de
   bootstrap-scripts convierte los alerts de exito de sesion en estas
   tarjetas flotantes. Fondo oscuro como el sidebar, entrada suave y
   salida con fade; con prefers-reduced-motion no hay animacion. */
.contenedor-toasts {
    position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1090;
    display: flex; flex-direction: column; gap: .6rem; max-width: min(380px, calc(100vw - 2.5rem));
}
.toast-flotante {
    display: flex; align-items: center; gap: .7rem;
    background: var(--sidebar-fondo); color: #fff;
    border-radius: .9rem; padding: .85rem 1rem;
    box-shadow: 0 10px 30px rgba(20, 23, 43, .35);
    animation: entrada-toast .35s ease;
}
.toast-flotante i { color: #4ade80; font-size: 1.1rem; flex-shrink: 0; }
.toast-flotante .texto-toast { font-size: .85rem; line-height: 1.35; }
.toast-flotante.toast-saliendo { opacity: 0; transform: translateY(6px); transition: opacity .3s ease, transform .3s ease; }
@keyframes entrada-toast {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .toast-flotante { animation: none; }
    .toast-flotante.toast-saliendo { transition: none; }
}

/* Boton de pago del residente (Fase 79): ancho completo, como el
   "Pagar en linea" del mockup. */
.btn-pagar-grande {
    width: 100%; padding: .7rem 1rem; font-weight: 600;
    display: flex; align-items: center; justify-content: center; gap: .5rem;
}
.total-confirmar-pago { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.badge-periodo-pago { background: var(--color-indigo-soft); color: var(--brand-primary); font-weight: 600; }

/* Panel del residente (Fase 81, mockup aprobado): barra apilada de la
   composicion del gasto, puntos de leyenda y tarjetas de acceso. */
.barra-composicion {
    display: flex; height: 12px; border-radius: 6px; overflow: hidden;
    background: var(--color-slate-soft);
}
.punto-leyenda {
    display: inline-block; width: 10px; height: 10px; border-radius: 50%;
    margin-right: .45rem; vertical-align: baseline;
}
.tarjeta-acceso { transition: transform .12s ease, box-shadow .12s ease; }
.tarjeta-acceso:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(20,23,43,.12); }
@media (prefers-reduced-motion: reduce) {
    .tarjeta-acceso { transition: none; }
    .tarjeta-acceso:hover { transform: none; }
}

/* Header del residente en dos niveles (Fase 82, mockup de Jorge):
   identidad arriba sobre fondo claro, navegacion con iconos abajo y el
   activo subrayado en indigo. */
:root { --linea-header: #e4e7ee; }
.header-residente { background: #fff; }
.header-residente .logo-wordmark { color: #1f2430; }
.chip-unidad-header {
    align-items: center; border: 1px solid var(--linea-header);
    border-radius: .6rem; padding: .35rem .8rem; font-size: .875rem; font-weight: 600;
}
.selector-unidad-header { width: auto; border-radius: .6rem; font-weight: 600; }
.campana-header { position: relative; color: #4a5361; }
.campana-header:hover { color: var(--brand-primary); }
.punto-campana {
    position: absolute; top: 1px; right: -1px; width: 8px; height: 8px;
    border-radius: 50%; background: var(--brand-primary); border: 1.5px solid #fff;
}
.avatar-iniciales {
    width: 34px; height: 34px; border-radius: 50%; background: var(--brand-primary);
    color: #fff; font-size: .8rem; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
}
.usuario-header { color: #1f2430; }
.nav-residente-tabs { border-color: var(--linea-header) !important; }
.nav-residente-tabs .nav { overflow-x: auto; }
.nav-residente-tabs .nav-link {
    color: #4a5361; font-size: .9rem; white-space: nowrap;
    padding: .65rem .9rem; border-bottom: 2px solid transparent;
}
.nav-residente-tabs .nav-link:hover { color: var(--brand-primary); }
.nav-residente-tabs .nav-link.active {
    color: var(--brand-primary); font-weight: 600;
    border-bottom-color: var(--brand-primary);
}

/* Botoncitos de turno de la reserva de espacios (Fase 84, maqueta
   aprobada): radio oculto + etiqueta. El elegido en indigo pleno; un
   turno ocupado (lo deshabilita el fetch por fecha) queda tachado. */
.turnos-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip-turno {
    border: 1.5px solid #d5dae3; border-radius: .65rem; padding: .45rem .85rem;
    font-size: .85rem; font-weight: 600; cursor: pointer; user-select: none;
    background: #fff; transition: border-color .1s ease, color .1s ease;
}
.chip-turno:hover { border-color: var(--brand-primary); color: var(--brand-primary); }
.input-turno:checked + .chip-turno {
    background: var(--brand-primary); border-color: var(--brand-primary); color: #fff;
}
.input-turno:focus-visible + .chip-turno { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.input-turno:disabled + .chip-turno {
    background: var(--superficie-pagina); color: #98a1ad; border-style: dashed;
    text-decoration: line-through; cursor: not-allowed;
}

/* Un turno deshabilitado sin consultar (falta elegir fecha) se atenua;
   uno OCUPADO (lo marca el fetch) ademas queda tachado. */
.input-turno:disabled + .chip-turno { opacity: .55; cursor: not-allowed; text-decoration: none; border-style: solid; background: #fff; color: inherit; }
.input-turno:disabled + .chip-turno.chip-ocupado {
    background: var(--superficie-pagina); color: #98a1ad; border-style: dashed;
    text-decoration: line-through; opacity: 1;
}

/* Fase 85: el botoncito de un turno con cupos parcialmente tomados
   avisa cuantos quedan. */
.chip-turno .resto-cupos { display: block; font-weight: 400; font-size: .68rem; opacity: .75; }

/* Calugas de avisos del residente (Fase 86, maqueta aprobada): tarjeta
   clickeable que abre el aviso completo en un modal; los no leidos con
   borde indigo. */
.caluga-aviso { cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
.caluga-aviso:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(20,23,43,.12); }
.caluga-aviso.aviso-nuevo { border-left: 4px solid var(--brand-primary); }
@media (prefers-reduced-motion: reduce) {
    .caluga-aviso { transition: none; }
    .caluga-aviso:hover { transform: none; }
}

/* Fase 86 bis: el aviso de la campana pasa de punto sutil a contador
   visible con el numero de avisos sin leer. */
.contador-campana {
    position: absolute; top: -5px; right: -8px; min-width: 17px; height: 17px;
    border-radius: 9px; background: var(--brand-primary); color: #fff;
    font-size: .64rem; font-weight: 700; line-height: 17px; text-align: center;
    padding: 0 4px; border: 2px solid #fff; box-sizing: content-box;
}

/* Fase 86 ter (ajustes de Jorge): el avance del aviso conserva el
   formato — se recorta en alto con un degradado en vez de aplanar el
   HTML — y el boton "Ver completo" vive en la esquina de la caluga. */
.avance-aviso { max-height: 5.6em; overflow: hidden; position: relative; font-size: .9rem; }
.avance-aviso img { max-width: 100%; height: auto; }
.avance-aviso::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2em;
    background: linear-gradient(to bottom, rgba(255,255,255,0), #fff);
}
.caluga-aviso { position: relative; }
.btn-ver-aviso { position: absolute; right: 1.25rem; bottom: 1rem; }

/* El item Avisos del menu lleva el contador de no leidos (Fase 86 ter). */
.contador-menu-avisos {
    background: var(--brand-primary); color: #fff; font-size: .64rem; font-weight: 700;
    border-radius: 9px; min-width: 17px; height: 17px; line-height: 17px;
    display: inline-block; text-align: center; padding: 0 4px; margin-left: .3rem; vertical-align: middle;
}

/* Filas de adjunto (Fase 87 bis, maqueta aprobada): cada documento de un
   reglamento con fondo suave, icono por tipo y acciones alineadas. */
.fila-adjunto {
    display: flex; align-items: center; gap: .75rem;
    background: var(--superficie-pagina); border-radius: .65rem; padding: .6rem .85rem;
}
.tipo-adjunto {
    width: 36px; height: 34px; border-radius: 8px; font-size: .6rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.tipo-pdf { background: var(--color-red-soft); color: var(--color-red); }
.tipo-doc { background: var(--color-indigo-soft); color: var(--color-indigo); }
.nombre-adjunto { font-size: .88rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meta-adjunto { font-size: .72rem; color: var(--bs-secondary-color); }
.btn-icono-doc {
    width: 34px; height: 34px; border-radius: 8px; border: 1.5px solid #d5dae3;
    background: #fff; color: #5c6b76; display: inline-flex; align-items: center;
    justify-content: center; font-size: .95rem; text-decoration: none;
}
.btn-icono-doc:hover { border-color: var(--brand-primary); color: var(--brand-primary); }

/* Logo (Fase 89): isotipo + wordmark alineados. El isotipo trae su
   propio fondo, asi que sirve igual sobre headers claros y oscuros. */
.logo-cel { display: inline-flex; align-items: center; gap: .5rem; }
.isotipo-cel { flex-shrink: 0; border-radius: 20%; }