/* =========================================================================
   MiCondominio — sistema visual "Pizarra y pátina"
   Pizarra: barra lateral. Concreto: fondo. Pátina: acción principal.
   Ámbar: solo lo que requiere atención. Ladrillo: errores y anulaciones.
   ========================================================================= */
:root {
  --pizarra: #18262B;
  --pizarra-2: #22343A;
  --pizarra-3: #2E444B;
  --concreto: #EDF0EF;
  --papel: #FFFFFF;
  --linea: #D9DFDD;
  --linea-suave: #E7EBEA;
  --tinta: #1B2326;
  --tinta-2: #4A585D;
  --tinta-3: #6E7C80;
  --patina: #1F6F62;
  --patina-hover: #185A4F;
  --patina-suave: #E3EFEC;
  --ambar: #E0A030;
  --ambar-suave: #FBF0DA;
  --ambar-tinta: #7A5410;
  --ladrillo: #B8432F;
  --ladrillo-suave: #F7E3DF;

  --f-titulo: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --f-texto: "Instrument Sans", "Segoe UI", system-ui, sans-serif;

  --sb-ancho: 264px;
  --sb-mini: 72px;
  --topbar-alto: 64px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;

  /* Bootstrap */
  --bs-body-font-family: var(--f-texto);
  --bs-body-color: var(--tinta);
  --bs-body-bg: var(--concreto);
  --bs-primary: var(--patina);
  --bs-primary-rgb: 31, 111, 98;
  --bs-success: #2F7D4A;
  --bs-success-rgb: 47, 125, 74;
  --bs-danger: var(--ladrillo);
  --bs-danger-rgb: 184, 67, 47;
  --bs-warning: var(--ambar);
  --bs-warning-rgb: 224, 160, 48;
  --bs-info: #3A6F8F;
  --bs-info-rgb: 58, 111, 143;
  --bs-secondary-color: var(--tinta-3);
  --bs-border-color: var(--linea);
  --bs-link-color: var(--patina);
  --bs-link-color-rgb: 31, 111, 98;
  --bs-link-hover-color: var(--patina-hover);
  --bs-link-hover-color-rgb: 24, 90, 79;
  --bs-border-radius: var(--r-sm);
  --bs-border-radius-lg: var(--r-md);
  --bs-focus-ring-color: rgba(31, 111, 98, .3);
}

html { font-size: 15px; }
body { font-family: var(--f-texto); background: var(--concreto); color: var(--tinta); min-height: 100vh; font-feature-settings: "tnum" 0; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--f-titulo); font-weight: 600; letter-spacing: -.01em; color: var(--tinta); }
a { text-underline-offset: .18em; }
.cifra, .table td.text-end, dd, .stat-num { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--patina); outline-offset: 2px; }
.saltar { position: absolute; left: -999px; top: 8px; z-index: 2000; background: var(--papel); padding: .5rem 1rem; border-radius: var(--r-sm); }
.saltar:focus { left: 8px; }
kbd { font-family: var(--f-texto); font-size: .72rem; font-weight: 600; background: var(--concreto); color: var(--tinta-2); border: 1px solid var(--linea); border-bottom-width: 2px; border-radius: 5px; padding: .1rem .35rem; }

/* ----------------------------------------------------------------- Shell */
.con-shell { display: block; }
.shell-main { min-height: 100vh; display: flex; flex-direction: column; margin-left: var(--sb-ancho); transition: margin-left .2s ease; }
.contenido { flex: 1; width: 100%; max-width: 1440px; padding: 1.75rem 2rem 2.5rem; }
.contenido:focus { outline: none; }

/* Sidebar */
#sidebar.sidebar { background-color: var(--pizarra) !important; color: #C9D3D1; }
.sidebar { width: var(--sb-ancho); display: flex; flex-direction: column; border-right: 0; }
@media (min-width: 992px) {
  .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 1030; transition: width .2s ease; }
}
@media (max-width: 991.98px) {
  .shell-main { margin-left: 0; }
  .sidebar { --bs-offcanvas-width: 284px; }
  .contenido { padding: 1.25rem 1rem 2rem; }
}
.sidebar-cabecera { height: var(--topbar-alto); display: flex; align-items: center; justify-content: space-between; padding: 0 1.1rem; border-bottom: 1px solid rgba(255,255,255,.06); flex-shrink: 0; }
.marca { display: inline-flex; align-items: center; gap: .6rem; color: #fff; text-decoration: none; font-family: var(--f-titulo); font-weight: 700; font-size: 1.18rem; letter-spacing: -.02em; white-space: nowrap; }
.marca:hover { color: #fff; }
.marca-oscura, .marca-oscura:hover { color: var(--pizarra); }
.marca-glifo { width: 30px; height: 30px; flex-shrink: 0; }

.sidebar-nav { flex: 1; overflow-y: auto; padding: .9rem .7rem; scrollbar-width: thin; scrollbar-color: var(--pizarra-3) transparent; }
.sb-grupo + .sb-grupo { margin-top: 2px; }
.sb-enlace { display: flex; align-items: center; gap: .75rem; width: 100%; padding: .6rem .75rem; border: 0; background: none; border-radius: var(--r-sm); color: #C9D3D1; font-weight: 500; text-decoration: none; text-align: left; position: relative; }
.sb-enlace .fa-fw { font-size: 1rem; width: 1.25rem; color: #8FA3A1; }
.sb-enlace:hover { background: var(--pizarra-2); color: #fff; }
.sb-enlace:hover .fa-fw { color: #fff; }
.sb-grupo.is-activo > .sb-enlace { color: #fff; }
.sb-grupo.is-activo > .sb-enlace .fa-fw { color: var(--ambar); }
.sb-enlace.active { background: var(--pizarra-2); }
.sb-enlace.active::before, .sb-sub a.active::before { content: ""; position: absolute; left: -.7rem; top: 50%; translate: 0 -50%; width: 3px; height: 1.3rem; border-radius: 0 3px 3px 0; background: var(--ambar); }
.sb-flecha { margin-left: auto; font-size: .7rem; transition: transform .2s ease; opacity: .6; }
.sb-toggle:not(.collapsed) .sb-flecha { transform: rotate(180deg); }
.sb-sub { margin: 2px 0 6px; padding-left: 2.25rem; position: relative; }
.sb-sub::before { content: ""; position: absolute; left: 1.35rem; top: 4px; bottom: 4px; width: 1px; background: rgba(255,255,255,.1); }
.sb-sub a { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .42rem .75rem; border-radius: var(--r-sm); color: #A9B8B6; text-decoration: none; font-size: .93rem; position: relative; }
.sb-sub a:hover { color: #fff; background: rgba(255,255,255,.04); }
.sb-sub a.active { color: #fff; font-weight: 600; background: var(--pizarra-2); }
.sb-sub a.active::before { left: -2.95rem; }
.sb-badge { min-width: 1.4rem; padding: .05rem .4rem; border-radius: 999px; background: var(--ambar); color: var(--pizarra); font-size: .72rem; font-weight: 700; text-align: center; line-height: 1.35; }
.sb-badge-grupo { margin-left: auto; }
.sb-badge-grupo + .sb-flecha { margin-left: .5rem; }
.sb-toggle:not(.collapsed) .sb-badge-grupo { display: none; }
.sb-toggle:not(.collapsed) .sb-badge-grupo + .sb-flecha { margin-left: auto; }

.sidebar-pie { display: flex; align-items: center; gap: .5rem; padding: .8rem .9rem; border-top: 1px solid rgba(255,255,255,.06); flex-shrink: 0; }
.sb-usuario { display: flex; align-items: center; gap: .65rem; min-width: 0; flex: 1; color: #fff; text-decoration: none; padding: .3rem; border-radius: var(--r-sm); }
.sb-usuario:hover { background: var(--pizarra-2); color: #fff; }
.sb-usuario small { color: #8FA3A1; font-size: .78rem; }
.sb-usuario .sb-texto { min-width: 0; line-height: 1.25; }

/* Sidebar contraído (solo escritorio) */
@media (min-width: 992px) {
  .sb-mini .sidebar { width: var(--sb-mini); }
  .sb-mini .shell-main { margin-left: var(--sb-mini); }
  .sb-mini .sidebar .sb-texto, .sb-mini .sidebar .sb-flecha, .sb-mini .sidebar .sb-sub, .sb-mini .sidebar .sb-badge-grupo { display: none !important; }
  .sb-mini .sidebar-cabecera { justify-content: center; padding: 0; }
  .sb-mini .sidebar-nav { padding: .9rem .6rem; }
  .sb-mini .sb-enlace { justify-content: center; padding: .7rem 0; }
  .sb-mini .sb-enlace .fa-fw { font-size: 1.1rem; }
  .sb-mini .sidebar-pie { justify-content: center; padding: .8rem 0; }
  .sb-mini .sb-usuario { flex: 0; }
}

/* Avatar */
.avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.avatar-iniciales { display: inline-grid; place-items: center; background: var(--patina); color: #fff; font-weight: 600; font-size: .85rem; letter-spacing: .02em; }
.sidebar .avatar-iniciales { background: var(--pizarra-3); }

/* Topbar */
.topbar { position: sticky; top: 0; z-index: 1020; height: var(--topbar-alto); display: flex; align-items: center; gap: .75rem; padding: 0 2rem; background: rgba(237, 240, 239, .88); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--linea); }
@media (max-width: 991.98px) { .topbar { padding: 0 1rem; } }
.btn-icono { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--r-sm); border: 0; background: transparent; color: var(--tinta-2); }
.btn-icono:hover { background: var(--papel); color: var(--tinta); }
.btn-icono-claro { color: #8FA3A1; }
.btn-icono-claro:hover { background: var(--pizarra-2); color: #fff; }
.migas { display: flex; align-items: center; gap: .55rem; min-width: 0; font-size: .95rem; color: var(--tinta-3); }
.migas a { color: var(--tinta-3); text-decoration: none; white-space: nowrap; }
.migas a:hover { color: var(--patina); }
.migas .fa-chevron-right { font-size: .6rem; opacity: .6; }
.migas [aria-current] { color: var(--tinta); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.buscador { margin-left: auto; display: inline-flex; align-items: center; gap: .6rem; height: 40px; width: min(320px, 32vw); padding: 0 .6rem 0 .85rem; border: 1px solid var(--linea); border-radius: var(--r-sm); background: var(--papel); color: var(--tinta-3); font-size: .93rem; }
.buscador span { flex: 1; text-align: left; }
.buscador:hover { border-color: #BAC6C3; color: var(--tinta-2); }
@media (max-width: 767.98px) { .buscador { width: 40px; padding: 0; justify-content: center; } .buscador span, .buscador kbd { display: none; } }
.btn-nuevo { height: 40px; }
.usuario-btn { border: 0; background: none; padding: 2px; border-radius: 50%; }
.usuario-btn:focus-visible { outline-offset: 1px; }
.usuario-menu { min-width: 230px; }

/* Pie */
.pie { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 2rem; font-size: .85rem; color: var(--tinta-3); border-top: 1px solid var(--linea-suave); }
.pie a { color: var(--tinta-3); }
@media (max-width: 991.98px) { .pie { padding: 1rem; } }

/* Público (sin sesión) */
.sin-shell { display: flex; flex-direction: column; }
.topbar-publica { display: flex; align-items: center; justify-content: space-between; padding: 1rem 2rem; }
.topbar-publica .btn-link { color: var(--tinta-2); text-decoration: none; }
.contenido-publico { margin: 0 auto; }
.pie-publico { max-width: none; }

/* ----------------------------------------------------------------- Paleta Ctrl+K */
.paleta-dialog { max-width: 600px; margin-top: 12vh; }
.paleta { border: 0; border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 24px 60px -12px rgba(24, 38, 43, .45); }
.paleta-buscar { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.2rem; border-bottom: 1px solid var(--linea-suave); color: var(--tinta-3); }
.paleta-buscar input { flex: 1; border: 0; outline: none; font-size: 1.1rem; color: var(--tinta); background: transparent; }
.paleta-lista { list-style: none; margin: 0; padding: .5rem; max-height: 52vh; overflow-y: auto; }
.paleta-lista li { display: flex; align-items: center; gap: .85rem; padding: .6rem .75rem; border-radius: var(--r-sm); cursor: pointer; }
.paleta-lista li .fa-fw { color: var(--tinta-3); }
.paleta-lista li small { margin-left: auto; color: var(--tinta-3); font-size: .8rem; }
.paleta-lista li[aria-selected="true"] { background: var(--patina-suave); }
.paleta-lista li[aria-selected="true"] .fa-fw { color: var(--patina); }
.paleta-lista mark { padding: 0; background: none; color: var(--patina); font-weight: 600; }
.paleta-lista .paleta-vacio { color: var(--tinta-3); cursor: default; justify-content: center; padding: 1.5rem; }
.paleta-pie { padding: .6rem 1.2rem; border-top: 1px solid var(--linea-suave); font-size: .8rem; color: var(--tinta-3); background: #F7F9F8; }

/* ----------------------------------------------------------------- Encabezados de página */
.page-header { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: flex-end; justify-content: space-between; margin-bottom: 1.5rem; }
.page-header h1, .page-header h2 { margin: 0; font-size: 1.85rem; font-weight: 700; letter-spacing: -.02em; color: var(--tinta); line-height: 1.15; }
.page-header > div { display: flex; flex-wrap: wrap; gap: .5rem; }

/* Bienvenida (inicio y portales) */
.bienvenida { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: flex-end; justify-content: space-between; margin: .25rem 0 1.75rem; }
.bienvenida-fecha { margin: 0 0 .25rem; color: var(--tinta-3); font-weight: 500; }
.bienvenida-titulo { margin: 0; font-size: clamp(2rem, 1.4rem + 2vw, 2.9rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.05; }
.bienvenida-sub { margin: .5rem 0 0; color: var(--tinta-2); font-size: 1.05rem; }
.estado-alquiler { display: inline-flex; align-items: center; gap: .5rem; margin: .75rem 0 0; padding: .45rem .9rem; border-radius: 999px; font-weight: 600; font-size: .98rem; text-decoration: none; }
.estado-alquiler-ok { background: #E1F0E6; color: #22603A; }
.estado-alquiler-mal { background: var(--ladrillo-suave); color: #8E2F1F; }
a.estado-alquiler-mal:hover { background: #F1D2CB; color: #7A2617; }
.bienvenida-acciones { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ----------------------------------------------------------------- Superficies */
.card, .panel { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r-md); box-shadow: none; }
.card > .card-header:first-child { border-radius: calc(var(--r-md) - 1px) calc(var(--r-md) - 1px) 0 0; }
.card-header { background: var(--papel); border-bottom: 1px solid var(--linea-suave); font-family: var(--f-titulo); font-weight: 600; font-size: 1.02rem; padding: .85rem 1.15rem; }
.card-header.bg-primary, .card-header.bg-success, .card-header.bg-info, .card-header.bg-danger, .card-header.bg-dark, .card-header.bg-secondary { color: #fff; }
.card-body { padding: 1.15rem; }
.card-footer { background: #F7F9F8; border-top: 1px solid var(--linea-suave); }
.panel { overflow: hidden; }
.panel-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem .75rem; }
.panel-cabecera h2 { margin: 0; font-size: 1.1rem; font-weight: 600; }
.panel-enlace { font-size: .9rem; font-weight: 500; text-decoration: none; }
.panel-enlace:hover { text-decoration: underline; }

/* Lista "Requiere atención" */
.atencion { list-style: none; margin: 0; padding: 0 .75rem .75rem; }
.atencion-item { display: grid; grid-template-columns: 4.5rem 1fr auto; align-items: center; gap: 1rem; padding: 1rem .5rem; border-top: 1px solid var(--linea-suave); }
.atencion-num { font-family: var(--f-titulo); font-size: 2.6rem; font-weight: 700; letter-spacing: -.04em; line-height: 1; text-align: center; font-variant-numeric: tabular-nums; }
.atencion-texto strong { display: block; font-size: 1.02rem; }
.atencion-texto span { color: var(--tinta-3); font-size: .92rem; }
.is-alerta .atencion-num { color: var(--ambar-tinta); background: var(--ambar-suave); border-radius: var(--r-md); padding: .55rem 0; }
.is-ok .atencion-num { color: var(--tinta-3); opacity: .55; padding: .55rem 0; }
@media (max-width: 575.98px) { .atencion-item { grid-template-columns: 3.5rem 1fr; } .atencion-item .btn { grid-column: 2; justify-self: start; } .atencion-num { font-size: 2rem; } }

/* Libro: filas etiqueta / valor navegables */
.libro { margin: 0; padding: 0 .75rem .75rem; }
.libro-fila { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .8rem .5rem; border-top: 1px solid var(--linea-suave); color: inherit; text-decoration: none; border-radius: 0; }
.libro-fila:hover { background: #F5F8F7; color: inherit; }
.libro-fila:hover dt { color: var(--patina); }
.libro-fila dt { font-weight: 500; color: var(--tinta-2); }
.libro-fila dd { margin: 0; font-family: var(--f-titulo); font-weight: 600; font-size: 1.3rem; letter-spacing: -.02em; }
.libro-destacado { flex-direction: column; gap: .2rem; }
.libro-destacado dd { font-size: 2rem; color: var(--patina); line-height: 1.15; }
.libro-alerta dd { color: var(--ambar-tinta); }

/* Bloque destacado: próxima cuota / cobrado */
.proximo { height: 100%; padding: 1.6rem 1.75rem; border-radius: var(--r-md); background: var(--pizarra); color: #DCE4E2; position: relative; overflow: hidden; }
.proximo::after { content: ""; position: absolute; right: -40px; bottom: -40px; width: 200px; height: 200px; background:
    linear-gradient(var(--pizarra-3) 0 0) 20px 20px / 36px 24px no-repeat,
    linear-gradient(var(--pizarra-3) 0 0) 76px 20px / 36px 24px no-repeat,
    linear-gradient(var(--ambar) 0 0) 20px 64px / 36px 24px no-repeat,
    linear-gradient(var(--pizarra-3) 0 0) 76px 64px / 36px 24px no-repeat;
  opacity: .55; pointer-events: none; }
.proximo-etiqueta { margin: 0 0 .5rem; font-family: var(--f-texto); font-size: 1rem; font-weight: 500; color: #A9B8B6; letter-spacing: 0; }
.proximo-monto { margin: 0; font-family: var(--f-titulo); font-size: clamp(2.4rem, 1.8rem + 2.2vw, 3.4rem); font-weight: 700; letter-spacing: -.04em; line-height: 1; color: #fff; }
.proximo-fecha { margin: .6rem 0 1.25rem; color: #C9D3D1; }
.proximo.is-vencida { background: #3A1E18; }
.proximo.is-vencida .proximo-etiqueta { color: #F2B8AC; }
.proximo.is-vacio .proximo-etiqueta { font-family: var(--f-titulo); font-size: 1.8rem; font-weight: 700; color: #fff; }
.btn-claro { --bs-btn-bg: #fff; --bs-btn-color: var(--pizarra); --bs-btn-hover-bg: var(--ambar); --bs-btn-hover-color: var(--pizarra); --bs-btn-active-bg: var(--ambar); font-weight: 600; }
.btn-borde-claro { --bs-btn-color: #fff; --bs-btn-border-color: rgba(255,255,255,.35); --bs-btn-hover-bg: rgba(255,255,255,.1); --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: #fff; --bs-btn-active-bg: rgba(255,255,255,.15); --bs-btn-active-color: #fff; }

/* Atajos (enlaces grandes con descripción) */
.atajo { display: flex; gap: 1rem; align-items: flex-start; height: 100%; padding: 1.15rem 1.25rem; border: 1px solid var(--linea); border-radius: var(--r-md); background: var(--papel); color: var(--tinta); text-decoration: none; }
.atajo > i { flex-shrink: 0; width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--patina-suave); color: var(--patina); font-size: 1.1rem; }
.atajo strong { display: block; font-family: var(--f-titulo); font-size: 1.08rem; font-weight: 600; }
.atajo span span { color: var(--tinta-3); font-size: .93rem; }
.atajo:hover { border-color: var(--patina); color: var(--tinta); }

/* Estados vacíos */
.vacio { padding: 2rem 1.25rem 2.25rem; text-align: center; color: var(--tinta-3); }
.vacio i { font-size: 1.6rem; color: var(--patina); opacity: .7; margin-bottom: .6rem; }
.vacio p { margin: 0; }

/* Estado textual */
.estado { display: inline-block; padding: .15rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 600; white-space: nowrap; }
.estado-ok { background: #E1F0E6; color: #22603A; }
.estado-mal { background: var(--ladrillo-suave); color: #8E2F1F; }
.estado-neutro { background: #ECEFED; color: #4A5752; }

/* Tarjetas de indicadores heredadas (otras vistas) */
.stat-card .stat-num { font-family: var(--f-titulo); font-size: 1.9rem; font-weight: 700; letter-spacing: -.03em; color: var(--tinta); }
.stat-card .stat-label { color: var(--tinta-3); font-size: .9rem; font-weight: 500; }
a .stat-card:hover { border-color: var(--patina); }

/* ----------------------------------------------------------------- Tablas */
.table { --bs-table-bg: transparent; --bs-table-hover-bg: #F4F7F6; --bs-table-striped-bg: #F7F9F8; margin-bottom: 0; }
.table > :not(caption) > * > * { padding: .7rem .9rem; border-bottom-color: var(--linea-suave); vertical-align: middle; }
.table.table-sm > :not(caption) > * > * { padding: .5rem .75rem; }
.table thead th, .table > thead.table-light th { background: #F5F7F6; color: var(--tinta-3); font-weight: 600; font-size: .85rem; border-bottom: 1px solid var(--linea); white-space: nowrap; }
.table > thead.table-dark th { background: var(--pizarra); color: #fff; }
.table tbody tr:last-child > * { border-bottom: 0; }
.table td.acciones, .table td.text-end, .table td.cifra { white-space: nowrap; }
@media (max-width: 767.98px) { .table td { min-width: 7.5rem; } .table td:first-child { min-width: 0; } }
.table a { font-weight: 500; text-decoration: none; }
.table a:hover { text-decoration: underline; }
.card > .table-responsive, .card > .table { border-radius: 0 0 var(--r-md) var(--r-md); }

/* ----------------------------------------------------------------- Botones */
.btn { --bs-btn-font-weight: 500; --bs-btn-padding-x: .95rem; --bs-btn-padding-y: .45rem; --bs-btn-border-radius: var(--r-sm); display: inline-flex; align-items: center; justify-content: center; gap: .45rem; }
.btn-sm { --bs-btn-padding-x: .65rem; --bs-btn-padding-y: .28rem; --bs-btn-font-size: .85rem; gap: .35rem; }
.btn-lg { --bs-btn-padding-y: .7rem; --bs-btn-font-size: 1.05rem; }
.btn-primary, .btn-success { --bs-btn-bg: var(--patina); --bs-btn-border-color: var(--patina); --bs-btn-hover-bg: var(--patina-hover); --bs-btn-hover-border-color: var(--patina-hover); --bs-btn-active-bg: var(--patina-hover); --bs-btn-active-border-color: var(--patina-hover); --bs-btn-disabled-bg: var(--patina); --bs-btn-disabled-border-color: var(--patina); }
.btn-secondary { --bs-btn-bg: #E3E8E6; --bs-btn-color: var(--tinta); --bs-btn-border-color: #E3E8E6; --bs-btn-hover-bg: #D5DCDA; --bs-btn-hover-color: var(--tinta); --bs-btn-hover-border-color: #D5DCDA; --bs-btn-active-bg: #C9D1CF; --bs-btn-active-color: var(--tinta); }
.btn-info { --bs-btn-bg: #E4EDF3; --bs-btn-color: #2B5873; --bs-btn-border-color: #E4EDF3; --bs-btn-hover-bg: #D3E2EC; --bs-btn-hover-color: #1F4459; --bs-btn-hover-border-color: #D3E2EC; --bs-btn-active-bg: #C4D7E4; --bs-btn-active-color: #1F4459; }
.btn-warning { --bs-btn-bg: var(--ambar); --bs-btn-color: var(--pizarra); --bs-btn-border-color: var(--ambar); --bs-btn-hover-bg: #CB8E22; --bs-btn-hover-color: var(--pizarra); --bs-btn-hover-border-color: #CB8E22; }
.btn-danger { --bs-btn-bg: var(--ladrillo); --bs-btn-border-color: var(--ladrillo); --bs-btn-hover-bg: #9E3624; --bs-btn-hover-border-color: #9E3624; --bs-btn-active-bg: #9E3624; }
.btn-outline-primary, .btn-outline-success { --bs-btn-color: var(--patina); --bs-btn-border-color: #A9CCC4; --bs-btn-hover-bg: var(--patina); --bs-btn-hover-border-color: var(--patina); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--patina-hover); --bs-btn-active-border-color: var(--patina-hover); }
.btn-outline-secondary { --bs-btn-color: var(--tinta-2); --bs-btn-border-color: var(--linea); --bs-btn-bg: var(--papel); --bs-btn-hover-bg: #F1F4F3; --bs-btn-hover-color: var(--tinta); --bs-btn-hover-border-color: #BAC6C3; --bs-btn-active-bg: #E7ECEA; --bs-btn-active-color: var(--tinta); }
.btn-outline-danger { --bs-btn-color: var(--ladrillo); --bs-btn-border-color: #E3B4AA; --bs-btn-hover-bg: var(--ladrillo); --bs-btn-hover-border-color: var(--ladrillo); }
.btn-outline-warning { --bs-btn-color: var(--ambar-tinta); --bs-btn-border-color: #EBCB8F; --bs-btn-hover-bg: var(--ambar); --bs-btn-hover-border-color: var(--ambar); --bs-btn-hover-color: var(--pizarra); }
.btn-link { text-decoration: none; }

/* ----------------------------------------------------------------- Formularios */
.form-label { font-weight: 500; color: var(--tinta-2); margin-bottom: .35rem; }
.form-control, .form-select { border-color: var(--linea); background-color: var(--papel); }
.form-control:focus, .form-select:focus { background-color: var(--papel); border-color: var(--patina); box-shadow: 0 0 0 .2rem rgba(31, 111, 98, .18); }
.form-check-input:checked { background-color: var(--patina); border-color: var(--patina); }
.form-check-input:focus { box-shadow: 0 0 0 .2rem rgba(31, 111, 98, .18); border-color: var(--patina); }
.form-control-lg { font-size: 1rem; padding: .7rem .9rem; }
.required::after { content: " *"; color: var(--ladrillo); }
.select2-container--bootstrap-5 .select2-selection { border-color: var(--linea); min-height: calc(1.5em + .75rem + 2px); }
.select2-container--bootstrap-5.select2-container--focus .select2-selection, .select2-container--bootstrap-5.select2-container--open .select2-selection { border-color: var(--patina); box-shadow: 0 0 0 .2rem rgba(31, 111, 98, .18); }
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--highlighted { background-color: var(--patina-suave); color: var(--tinta); }
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected { background-color: var(--patina); color: #fff; }

/* ----------------------------------------------------------------- Avisos, insignias, pestañas */
.alert { border: 0; border-left: 4px solid; border-radius: var(--r-sm); }
.alert-success { background: #E1F0E6; color: #1E5232; border-left-color: #2F7D4A; }
.alert-danger { background: var(--ladrillo-suave); color: #7A2818; border-left-color: var(--ladrillo); }
.alert-warning { background: var(--ambar-suave); color: var(--ambar-tinta); border-left-color: var(--ambar); }
.alert-info { background: #E4EDF3; color: #234A61; border-left-color: #3A6F8F; }
.alert-secondary { background: #EEF1F0; color: var(--tinta-2); border-left-color: var(--tinta-3); }
.badge { font-weight: 600; border-radius: 999px; padding: .35em .65em; }
.badge.bg-warning { color: var(--pizarra) !important; }
.nav-tabs { border-bottom-color: var(--linea); gap: .25rem; }
.nav-tabs .nav-link { color: var(--tinta-3); border: 0; border-bottom: 2px solid transparent; font-weight: 500; padding: .6rem .9rem; }
.nav-tabs .nav-link:hover { color: var(--tinta); border-bottom-color: var(--linea); }
.nav-tabs .nav-link.active { color: var(--patina); background: transparent; border-bottom-color: var(--patina); }
.nav-pills .nav-link.active { background: var(--patina); }
.list-group-item.active { background: var(--patina); border-color: var(--patina); }
.pagination { --bs-pagination-color: var(--patina); --bs-pagination-active-bg: var(--patina); --bs-pagination-active-border-color: var(--patina); --bs-pagination-border-color: var(--linea); --bs-pagination-hover-color: var(--patina-hover); }
.dropdown-menu { --bs-dropdown-border-color: var(--linea); --bs-dropdown-border-radius: var(--r-md); --bs-dropdown-link-active-bg: var(--patina); --bs-dropdown-item-padding-y: .45rem; box-shadow: 0 12px 32px -8px rgba(24, 38, 43, .22); padding: .4rem; }
.dropdown-item { border-radius: 6px; }
.dropdown-item .fa-fw { color: var(--tinta-3); margin-right: .25rem; }
.dropdown-item:active .fa-fw { color: inherit; }
.modal-content { border: 0; border-radius: var(--r-lg); }

/* ----------------------------------------------------------------- Detalle */
dl.detalle dt { color: var(--tinta-3); font-weight: 500; }
dl.detalle dd { margin-bottom: .7rem; }
.avatar-lg { width: 96px; height: 96px; object-fit: cover; }

/* ----------------------------------------------------------------- Acceso (login y recuperación) */
.auth-body { background: var(--papel); }
.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.auth-escena { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 2.25rem 2.75rem; background: var(--pizarra); color: #DCE4E2; overflow: hidden; }
.fachada { position: absolute; left: 50%; bottom: 0; translate: -50% 0; width: min(88%, 560px); height: auto; }
.f-bloque { fill: var(--pizarra-2); }
.f-bloque-2 { fill: #1F3036; }
.f-ventana { fill: var(--pizarra-3); }
.f-ventana.f-on { fill: var(--ambar); animation: encender .5s ease-out both; animation-delay: var(--d); }
.f-puerta { fill: #0F1A1D; }
@keyframes encender { from { fill: var(--pizarra-3); } to { fill: var(--ambar); } }
.auth-lema { position: relative; z-index: 1; max-width: 30rem; margin-top: 3rem; }
.auth-escena { justify-content: flex-start; }
.auth-lema-titulo { font-family: var(--f-titulo); font-size: clamp(1.9rem, 1.2rem + 1.6vw, 2.8rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.05; color: #fff; margin: 0 0 .9rem; }
.auth-lema-sub { color: #A9B8B6; font-size: 1.02rem; max-width: 38ch; margin: 0; }
.auth-panel { display: flex; align-items: center; justify-content: center; padding: 3rem 1.5rem; }
.auth-caja { width: 100%; max-width: 400px; }
.auth-caja.col-md-8, .auth-caja.col-lg-6 { max-width: 560px; }
.auth-titulo { font-size: 2rem; font-weight: 700; letter-spacing: -.03em; margin-bottom: 1.5rem; }
.auth-alterno { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--linea-suave); color: var(--tinta-3); }
@media (max-width: 991.98px) {
  .auth { grid-template-columns: 1fr; }
  .auth-escena { display: none; }
  .auth-panel { align-items: flex-start; padding-top: 2rem; }
  .auth-caja .marca { display: inline-flex; }
}

/* ----------------------------------------------------------------- Portada pública */
.portada { display: grid; grid-template-columns: 1.2fr 1fr; gap: 3rem; align-items: center; min-height: calc(100vh - 180px); max-width: 1160px; margin: 0 auto; padding: 2rem 0; }
.portada h1 { font-size: clamp(2.4rem, 1.5rem + 3.4vw, 4.4rem); font-weight: 700; letter-spacing: -.045em; line-height: 1; margin-bottom: 1.25rem; max-width: 14ch; }
.portada p { font-size: 1.15rem; color: var(--tinta-2); max-width: 46ch; }
.portada-caminos { display: grid; gap: 1rem; }
@media (max-width: 991.98px) { .portada { grid-template-columns: 1fr; gap: 2rem; min-height: 0; } }


/* ----------------------------------------------------------------- Contextos de trabajo
   Alquiler (pátina), Condominio (azul acero), General (pizarra). Cambia el acento de botones,
   enlaces y selección, para que siempre se sepa en qué negocio se está trabajando. */
.ctx-alquiler   { --ctx: #1F6F62; --ctx-hover: #185A4F; --ctx-suave: #E3EFEC; --ctx-rgb: 31, 111, 98;  --ctx-hover-rgb: 24, 90, 79; }
.ctx-condominio { --ctx: #2F5D8A; --ctx-hover: #264C72; --ctx-suave: #E3ECF5; --ctx-rgb: 47, 93, 138; --ctx-hover-rgb: 38, 76, 114; }
.ctx-general    { --ctx: #44555C; --ctx-hover: #35444A; --ctx-suave: #E6EBEC; --ctx-rgb: 68, 85, 92;  --ctx-hover-rgb: 53, 68, 74; }
.ctx-alquiler, .ctx-condominio, .ctx-general, .ctx-plataforma {
  --patina: var(--ctx); --patina-hover: var(--ctx-hover); --patina-suave: var(--ctx-suave);
  --bs-primary: var(--ctx); --bs-primary-rgb: var(--ctx-rgb);
  --bs-link-color: var(--ctx); --bs-link-color-rgb: var(--ctx-rgb);
  --bs-link-hover-color: var(--ctx-hover); --bs-link-hover-color-rgb: var(--ctx-hover-rgb);
  --bs-focus-ring-color: rgba(var(--ctx-rgb), .3);
}

/* Selector de contexto en la barra lateral */
.contextos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: .8rem .7rem .2rem; padding: 4px; background: rgba(0,0,0,.22); border-radius: var(--r-md); }
.contexto-opcion { display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: .5rem .25rem; border-radius: var(--r-sm); color: #A9B8B6; text-decoration: none; font-size: .78rem; font-weight: 500; }
.contexto-opcion i { font-size: 1rem; }
.contexto-opcion:hover { color: #fff; background: rgba(255,255,255,.06); }
.contexto-opcion.active { color: #fff; font-weight: 600; }
.contexto-opcion.ctxo-alquiler.active   { background: #1F6F62; }
.contexto-opcion.ctxo-condominio.active { background: #2F5D8A; }
.contexto-opcion.ctxo-general.active    { background: #44555C; }
@media (min-width: 992px) {
  .sb-mini .contextos { grid-template-columns: 1fr; margin: .8rem .6rem .2rem; }
  .sb-mini .contexto-opcion { padding: .55rem 0; }
}

/* Migas: el primer nivel lleva el color del contexto */
.migas .migas-ctx { color: var(--patina); font-weight: 600; display: inline-flex; align-items: center; gap: .4rem; }
.migas .migas-ctx:hover { color: var(--patina-hover); }

/* Tarjetas de contexto en la vista consolidada */
.contexto-tarjeta { height: 100%; display: flex; flex-direction: column; gap: .5rem; padding: 1.25rem 1.25rem 1.4rem; background: var(--papel); border: 1px solid var(--linea); border-top: 4px solid var(--ctx); border-radius: var(--r-md); }
.contexto-tarjeta header { display: flex; align-items: center; gap: .65rem; }
.contexto-tarjeta header i { width: 38px; height: 38px; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--ctx-suave); color: var(--ctx); }
.contexto-tarjeta h2 { margin: 0; font-size: 1.3rem; font-weight: 700; }
.contexto-tarjeta .libro { padding: 0; margin-bottom: .5rem; }
.contexto-tarjeta .libro-destacado dd { color: var(--ctx); }
.contexto-tarjeta .btn { align-self: flex-start; }

/* Barra de ocupación */
.ocupacion { height: 8px; border-radius: 999px; background: var(--linea-suave); overflow: hidden; }
.ocupacion span { display: block; height: 100%; background: var(--patina); border-radius: 999px; }

/* Lista simple de tres datos por fila */
.lista-simple { list-style: none; margin: 0; padding: 0 1.25rem 1rem; }
.lista-simple li { display: grid; grid-template-columns: 1fr auto; gap: .1rem 1rem; padding: .7rem 0; border-top: 1px solid var(--linea-suave); }
.lista-simple li > a { font-weight: 600; text-decoration: none; }
.lista-simple li > .text-muted { grid-column: 1; font-size: .88rem; }
.lista-simple li > .cifra { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: .9rem; color: var(--tinta-2); }

/* Estado vacío destacado */
.vacio-grande { padding: 3.5rem 1.5rem; }
.vacio-grande i { font-size: 2.4rem; }
.vacio-grande h2 { font-size: 1.4rem; font-weight: 700; color: var(--tinta); margin: .5rem 0; }
.vacio-grande p { max-width: 52ch; margin: 0 auto; }

/* Paleta: etiqueta de contexto */
.paleta-ctx { font-size: .72rem; font-weight: 600; padding: .1rem .45rem; border-radius: 999px; margin-left: .5rem; }
.paleta-ctx-alquiler   { background: #E3EFEC; color: #1F6F62; }
.paleta-ctx-condominio { background: #E3ECF5; color: #2F5D8A; }
.paleta-ctx-general    { background: #E6EBEC; color: #44555C; }

/* ----------------------------------------------------------------- Movimiento */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; }
}
@media print {
  .sidebar, .topbar, .pie { display: none !important; }
  .shell-main { margin-left: 0 !important; }
}

/* ----------------------------------------------------------------- Condominios */
.opciones-tarjeta { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .75rem; }
.opcion-tarjeta { display: flex; gap: .75rem; align-items: flex-start; padding: 1rem; border: 1px solid var(--linea); border-radius: var(--r-md); cursor: pointer; background: var(--papel); }
.opcion-tarjeta input { margin-top: .3rem; accent-color: var(--patina); }
.opcion-tarjeta strong { display: block; font-family: var(--f-titulo); font-weight: 600; }
.opcion-tarjeta span span { color: var(--tinta-3); font-size: .9rem; }
.opcion-tarjeta:has(input:checked) { border-color: var(--patina); background: var(--patina-suave); }
.operador-vigente { display: flex; flex-direction: column; gap: .15rem; padding: 1rem 1.1rem; border-radius: var(--r-md); background: var(--patina-suave); border-left: 4px solid var(--patina); }
.operador-vigente strong { font-family: var(--f-titulo); font-size: 1.25rem; font-weight: 700; }
.operador-vigente span { color: var(--tinta-2); font-size: .92rem; }
.operador-vigente .operador-etiqueta { font-size: .82rem; color: var(--tinta-3); }
.operador-vigente.is-vacio { background: var(--ambar-suave); border-left-color: var(--ambar); }
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
.tabla-coeficientes input[readonly] { background: transparent; border-color: transparent; }

/* ----------------------------------------------------------------- Matriz de permisos */
.matriz-wrap { max-height: 72vh; }
.matriz { border-collapse: separate; border-spacing: 0; }
.matriz th, .matriz td { white-space: nowrap; }
.matriz thead th { position: sticky; top: 0; z-index: 2; }
.matriz thead tr:nth-child(2) th { top: 2.3rem; }
.matriz .matriz-modulo { position: sticky; left: 0; z-index: 3; background: var(--papel); min-width: 15rem; font-weight: 600; color: var(--tinta); }
.matriz thead .matriz-modulo { background: #F5F7F6; z-index: 4; }
.matriz .matriz-grupo { text-align: left; color: var(--tinta-2); border-left: 2px solid var(--linea); }
.matriz .matriz-rol { font-size: .8rem; text-align: center; }
.matriz td { padding: .3rem .35rem !important; }
.matriz td .form-select { min-width: 6.2rem; font-size: .82rem; }
.matriz td.nivel-0 .form-select { color: var(--tinta-3); }
.matriz td.nivel-3 .form-select, .matriz td.nivel-4 .form-select { font-weight: 600; }
.matriz-marca { display: inline-block; margin-left: .35rem; padding: 0 .4rem; border-radius: 999px; background: var(--ambar-suave); color: var(--ambar-tinta); font-size: .7rem; font-weight: 600; vertical-align: middle; }

/* Roles asignados a un usuario */
.lista-roles { list-style: none; margin: 0; padding: 0 1.25rem 1rem; }
.lista-roles li { display: grid; grid-template-columns: 1fr auto; gap: .1rem 1rem; align-items: center; padding: .7rem 0; border-top: 1px solid var(--linea-suave); }
.lista-roles li > span { grid-column: 1; color: var(--tinta-3); font-size: .9rem; }
.lista-roles li > form { grid-column: 2; grid-row: 1 / span 2; }
.lista-roles li em { font-style: normal; margin-left: .4rem; padding: 0 .45rem; border-radius: 999px; background: var(--linea-suave); font-size: .75rem; }
.lista-roles li.is-pasado { opacity: .65; }
.estado-pend { background: var(--ambar-suave); color: var(--ambar-tinta); }
.libro-horizontal { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); padding: .5rem .75rem; }
.libro-horizontal .libro-fila { flex-direction: column; border-top: 0; gap: .15rem; }
.libro-horizontal .libro-fila + .libro-fila { border-left: 1px solid var(--linea-suave); }
@media (max-width: 575.98px) { .libro-horizontal .libro-fila + .libro-fila { border-left: 0; border-top: 1px solid var(--linea-suave); } }

/* ----------------------------------------------------------------- Recibo imprimible */
.recibo { max-width: 760px; margin: 0 auto; padding: 2rem 2.25rem; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r-md); position: relative; }
.recibo-cabecera { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: 1rem; border-bottom: 2px solid var(--tinta); margin-bottom: 1.25rem; }
.recibo-condominio { font-family: var(--f-titulo); font-size: 1.4rem; font-weight: 700; margin: 0; }
.recibo-numero { text-align: right; }
.recibo-numero span { display: block; color: var(--tinta-3); font-size: .85rem; }
.recibo-numero strong { font-family: var(--f-titulo); font-size: 1.5rem; }
.recibo-datos { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem 1.5rem; margin-bottom: 1.25rem; }
.recibo-datos dt { color: var(--tinta-3); font-weight: 500; font-size: .85rem; }
.recibo-datos dd { margin: 0; font-weight: 600; }
.recibo-detalle tfoot th { font-size: 1.1rem; border-top: 2px solid var(--tinta); }
.recibo-pie { display: flex; flex-direction: column; gap: .25rem; margin-top: 1rem; color: var(--tinta-3); font-size: .85rem; }
.recibo-anulado { padding: .6rem .9rem; border-radius: var(--r-sm); background: var(--ladrillo-suave); color: #7A2818; font-weight: 600; }
.recibo.is-anulado .recibo-datos, .recibo.is-anulado .recibo-detalle { opacity: .55; }
.ocupacion.is-excedido span { background: var(--ladrillo); }
@media print {
  .no-print, .alert { display: none !important; }
  body, .contenido { background: #fff !important; padding: 0 !important; }
  .recibo { border: 0; padding: 0; }
}

/* ----------------------------------------------------------------- Indicadores del panel de la junta */
.indicador { display: flex; flex-direction: column; gap: .2rem; height: 100%; padding: 1.1rem 1.2rem; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r-md); color: var(--tinta); text-decoration: none; }
.indicador:hover { border-color: var(--patina); color: var(--tinta); }
.indicador-etiqueta { color: var(--tinta-3); font-weight: 500; font-size: .92rem; }
.indicador-valor { font-family: var(--f-titulo); font-size: 1.85rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.indicador-nota { color: var(--tinta-2); font-size: .88rem; }
.indicador.is-alerta { border-left: 4px solid var(--ambar); }
.indicador.is-alerta .indicador-valor { color: var(--ambar-tinta); }

/* ---------- Etapa 6: cuadro de turnos ---------- */
.turnos-barra { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin-bottom: 1rem; }
.semana-nav { display: flex; align-items: center; gap: .6rem; }
.semana-nav strong { font-family: var(--f-titulo); font-size: 1.15rem; font-weight: 600; min-width: 13ch; text-align: center; }
.turnos-resumen { color: var(--tinta-3); font-size: .9rem; }
.cuadro-turnos-panel { overflow: hidden; }
.cuadro-turnos { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 920px; table-layout: fixed; }
.cuadro-turnos th, .cuadro-turnos td { border-bottom: 1px solid var(--linea-suave); border-right: 1px solid var(--linea-suave); vertical-align: top; padding: .45rem; }
.cuadro-turnos thead th { background: var(--concreto); font-size: .8rem; font-weight: 600; color: var(--tinta-2); text-align: center; padding: .6rem .45rem; }
.cuadro-turnos thead th span { color: var(--tinta-3); font-weight: 500; margin-right: .15rem; }
.cuadro-turnos .ct-persona { width: 190px; text-align: left; position: sticky; left: 0; background: var(--papel); z-index: 1; }
.cuadro-turnos thead .ct-persona { background: var(--concreto); }
.cuadro-turnos tbody .ct-persona a { display: block; font-weight: 600; color: var(--tinta); text-decoration: none; line-height: 1.25; }
.cuadro-turnos tbody .ct-persona a:hover { text-decoration: underline; }
.cuadro-turnos tbody .ct-persona span { font-size: .78rem; color: var(--tinta-3); font-weight: 400; }
.cuadro-turnos td.ct-hoy { background: color-mix(in srgb, var(--ctx, var(--patina)) 5%, var(--papel)); }
.cuadro-turnos thead th.ct-hoy { color: var(--ctx, var(--patina)); box-shadow: inset 0 -3px 0 var(--ctx, var(--patina)); }
.cuadro-turnos tbody tr:last-child > * { border-bottom: 0; }
.cuadro-turnos tr > :last-child { border-right: 0; }
.turno-ficha { display: block; width: 100%; text-align: left; border: 1px solid var(--linea); border-left: 4px solid var(--tinta-3);
  background: var(--papel); border-radius: var(--r-sm); padding: .3rem .45rem; margin-bottom: .3rem; font-size: .78rem; line-height: 1.3; color: var(--tinta); }
.turno-ficha:hover { border-color: var(--tinta-3); }
.turno-ficha:focus-visible { outline: 2px solid var(--ctx, var(--patina)); outline-offset: 1px; }
.turno-ficha strong { display: block; font-variant-numeric: tabular-nums; font-size: .82rem; }
.turno-ficha span { display: block; color: var(--tinta-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.turno-programado { border-left-color: var(--ctx, var(--patina)); }
.turno-cumplido { border-left-color: #2F7D4A; background: #EEF6F0; }
.turno-propuesto { border-left-color: var(--ambar); background: var(--ambar-suave); border-style: dashed solid dashed solid; }
.turno-falta, .turno-rechazado { border-left-color: var(--ladrillo); background: var(--ladrillo-suave); }
.turno-rechazado strong { text-decoration: line-through; }
.turno-vacio { display: block; width: 100%; min-height: 2.6rem; border: 1px dashed transparent; border-radius: var(--r-sm); background: none; color: transparent; }
.cuadro-turnos td:hover .turno-vacio, .turno-vacio:focus-visible { border-color: var(--linea); color: var(--tinta-3); }
.turnos-leyenda { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; align-items: center; padding: .7rem 1rem; border-top: 1px solid var(--linea-suave); font-size: .8rem; color: var(--tinta-2); }
.ley { display: inline-block; width: .8rem; height: .8rem; border-radius: 3px; vertical-align: -1px; margin-right: .25rem; border-left: 4px solid; }
.ley-programado { border-color: var(--ctx, var(--patina)); background: var(--papel); box-shadow: inset 0 0 0 1px var(--linea); }
.ley-cumplido { border-color: #2F7D4A; background: #EEF6F0; }
.ley-propuesto { border-color: var(--ambar); background: var(--ambar-suave); }
.ley-falta { border-color: var(--ladrillo); background: var(--ladrillo-suave); }
.dias-semana { display: flex; gap: .35rem; }
.dias-semana input { position: absolute; opacity: 0; }
.dias-semana span { display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; border: 1px solid var(--linea); border-radius: 50%; font-weight: 600; cursor: pointer; color: var(--tinta-2); }
.dias-semana input:checked + span { background: var(--ctx, var(--patina)); border-color: var(--ctx, var(--patina)); color: #fff; }
.dias-semana input:focus-visible + span { outline: 2px solid var(--ctx, var(--patina)); outline-offset: 2px; }
.ficha-persona { display: flex; gap: 1rem; align-items: center; }
.ficha-persona .iniciales { width: 3.2rem; height: 3.2rem; border-radius: 50%; display: grid; place-items: center; background: var(--pizarra-3); color: #fff; font-family: var(--f-titulo); font-weight: 600; font-size: 1.1rem; flex: none; }
@media print { .turnos-barra .btn, .turno-vacio, .turnos-leyenda a { display: none !important; } .cuadro-turnos { min-width: 0; } }
.turno-otro { border: 1px dashed var(--linea); border-radius: var(--r-sm); padding: .3rem .45rem; margin-bottom: .3rem; font-size: .78rem; line-height: 1.3; color: var(--tinta-3);
  background: repeating-linear-gradient(-45deg, transparent 0 6px, var(--linea-suave) 6px 7px); }
.turno-otro strong { display: block; font-weight: 600; font-variant-numeric: tabular-nums; }
.turno-otro span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.estado-info { background: var(--ctx-suave, #E3ECF5); color: var(--ctx, #2F5D8A); }

/* ---------- Etapa 7: asambleas ---------- */
.asamblea-fila { display: flex; align-items: center; gap: 1rem; padding: .8rem 1rem; border-top: 1px solid var(--linea-suave); color: var(--tinta); text-decoration: none; }
.asamblea-fila:hover { background: var(--concreto); color: var(--tinta); }
.asamblea-fecha { width: 3.6rem; flex: none; text-align: center; font-size: .78rem; color: var(--tinta-3); line-height: 1.1; }
.asamblea-fecha strong { display: block; font-family: var(--f-titulo); font-size: 1.5rem; color: var(--tinta); }
.punto-num { display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--ctx-suave, var(--patina-suave)); color: var(--ctx, var(--patina)); font-size: .85rem; margin-right: .35rem; vertical-align: 1px; }
.quorum-cifra strong { font-family: var(--f-titulo); font-size: 2.6rem; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.quorum-cifra span { color: var(--tinta-3); }
.quorum-barra, .conteo-barra { position: relative; height: .9rem; border-radius: 999px; background: var(--linea-suave); display: flex; overflow: visible; }
.quorum-barra > span { display: block; height: 100%; border-radius: 999px; background: var(--ambar); transition: width .4s ease; }
.quorum-barra > span.ok { background: #2F7D4A; }
.quorum-barra i, .conteo-meta { position: absolute; top: -.3rem; bottom: -.3rem; width: 2px; background: var(--tinta); }
.quorum-barra i.q2 { background: var(--tinta-3); }
.conteo { margin-top: .4rem; }
.conteo-barra { overflow: hidden; border-radius: 6px; height: 1.1rem; }
.conteo-barra span { display: block; height: 100%; }
.conteo-barra .conteo-meta { top: 0; bottom: 0; width: 2px; background: var(--tinta); }
.c-favor { background: #2F7D4A; } .c-contra { background: var(--ladrillo); } .c-abst { background: var(--tinta-3); }
.conteo-leyenda { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin-top: .45rem; font-size: .82rem; color: var(--tinta-2); }
.ley-favor { border-color: #2F7D4A; background: #2F7D4A; } .ley-contra { border-color: var(--ladrillo); background: var(--ladrillo); } .ley-abst { border-color: var(--tinta-3); background: var(--tinta-3); }
.votos-tabla { max-height: 26rem; overflow: auto; border: 1px solid var(--linea-suave); border-radius: var(--r-sm); }
.votos-tabla thead th { position: sticky; top: 0; background: var(--papel); }
.asistentes li { display: flex; align-items: center; gap: .6rem; padding: .45rem 1rem; border-top: 1px solid var(--linea-suave); }
.asistentes li > span:first-child { flex: 1; }
@media (prefers-reduced-motion: reduce) { .quorum-barra > span { transition: none; } }

/* ---------- Etapa 8: incidencias ---------- */
.plazo { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; font-weight: 600; white-space: nowrap; }
.plazo::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
.plazo-ok { color: var(--tinta-3); }
.plazo-cerca { color: var(--ambar-tinta); }
.plazo-vencido { color: var(--ladrillo); }
.prioridad { display: inline-block; font-size: .72rem; font-weight: 700; padding: .1rem .45rem; border-radius: 4px; border: 1px solid var(--linea); color: var(--tinta-2); }
.prioridad-3 { border-color: var(--ambar); color: var(--ambar-tinta); background: var(--ambar-suave); }
.prioridad-4 { border-color: var(--ladrillo); color: #fff; background: var(--ladrillo); }
.vistas { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.vistas a { padding: .35rem .8rem; border-radius: 999px; border: 1px solid var(--linea); color: var(--tinta-2); text-decoration: none; font-size: .88rem; background: var(--papel); }
.vistas a[aria-current="page"] { background: var(--ctx, var(--patina)); border-color: var(--ctx, var(--patina)); color: #fff; }
.vistas a span { font-weight: 700; margin-left: .25rem; }
.inc-fila { display: grid; grid-template-columns: 4.5rem 1fr auto; gap: .2rem 1rem; align-items: center; padding: .75rem 1rem; border-top: 1px solid var(--linea-suave); color: var(--tinta); text-decoration: none; }
.inc-fila:hover { background: var(--concreto); color: var(--tinta); }
.inc-fila .inc-id { color: var(--tinta-3); font-variant-numeric: tabular-nums; font-size: .85rem; }
.inc-fila .inc-meta { grid-column: 2; font-size: .82rem; color: var(--tinta-3); }
.inc-fila .inc-lado { grid-row: 1 / span 2; grid-column: 3; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; }
.linea-tiempo { list-style: none; margin: 0; padding: 0 1rem 1rem; }
.linea-tiempo li { position: relative; padding: .7rem 0 .7rem 1.6rem; border-left: 2px solid var(--linea); margin-left: .45rem; }
.linea-tiempo li::before { content: ""; position: absolute; left: -.42rem; top: 1rem; width: .75rem; height: .75rem; border-radius: 50%; background: var(--papel); border: 2px solid var(--tinta-3); }
.linea-tiempo li.ev-estado::before, .linea-tiempo li.ev-asignacion::before { border-color: var(--ctx, var(--patina)); background: var(--ctx, var(--patina)); }
.linea-tiempo li.ev-cierre::before { border-color: #2F7D4A; background: #2F7D4A; }
.linea-tiempo li.ev-interno { background: repeating-linear-gradient(-45deg, transparent 0 8px, var(--concreto) 8px 9px); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.linea-tiempo .ev-cab { font-size: .82rem; color: var(--tinta-3); }
.linea-tiempo .ev-cab strong { color: var(--tinta); }
.linea-tiempo .ev-texto { margin: .25rem 0 0; white-space: pre-line; }
.fotos { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.fotos a { display: block; width: 6rem; height: 6rem; border-radius: var(--r-sm); overflow: hidden; border: 1px solid var(--linea); }
.fotos img { width: 100%; height: 100%; object-fit: cover; }
.estrellas { display: inline-flex; flex-direction: row-reverse; gap: .15rem; }
.estrellas input { position: absolute; opacity: 0; }
.estrellas label { font-size: 1.7rem; color: var(--linea); cursor: pointer; line-height: 1; }
.estrellas input:checked ~ label, .estrellas label:hover, .estrellas label:hover ~ label { color: var(--ambar); }
.estrellas input:focus-visible + label { outline: 2px solid var(--ctx, var(--patina)); outline-offset: 2px; border-radius: 4px; }
.lugar-opciones { display: flex; gap: .5rem; flex-wrap: wrap; }
.libro-compacto dd { font-size: .95rem; font-family: var(--f-texto); font-weight: 600; letter-spacing: 0; }
.libro-compacto dt { font-size: .85rem; }

/* ---------- Etapa 9: plataforma ---------- */
.franja-soporte { display: flex; align-items: center; gap: .75rem; padding: .55rem 1.5rem; background: var(--ambar); color: #3A2A05; font-size: .9rem; }
.franja-soporte form { margin-left: auto; }
.plan-tarjeta { border: 1px solid var(--linea); border-radius: var(--r-md); padding: 1.2rem; background: var(--papel); height: 100%; display: flex; flex-direction: column; gap: .35rem; }
.plan-tarjeta.es-actual { border-color: var(--ctx, var(--patina)); box-shadow: inset 0 0 0 1px var(--ctx, var(--patina)); }
.plan-precio { font-family: var(--f-titulo); font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em; }
.uso { margin-bottom: 1rem; }
.uso-cab { display: flex; justify-content: space-between; font-size: .9rem; margin-bottom: .3rem; }
.uso-barra { height: .55rem; border-radius: 999px; background: var(--linea-suave); overflow: hidden; }
.uso-barra span { display: block; height: 100%; background: var(--ctx, var(--patina)); }
.uso-barra span.cerca { background: var(--ambar); } .uso-barra span.lleno { background: var(--ladrillo); }
.ctx-plataforma { --ctx: #5B4A8A; --ctx-hover: #4A3C72; --ctx-suave: #ECE8F5; --ctx-rgb: 91, 74, 138; --ctx-hover-rgb: 74, 60, 114; }
.marca-logo { width: 28px; height: 28px; border-radius: 6px; object-fit: contain; background: #fff; }
.marca .marca-glifo { color: var(--marca-color, currentColor); }
/* Nombres de cuenta largos en la cabecera del menú */
.sidebar .marca { max-width: 100%; min-width: 0; }
.sidebar .marca > .sb-texto { overflow: hidden; text-overflow: ellipsis; }

/* ----------------------------------------------------------------- Etapa 13: avisos, mensajes y app */
.campana { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; color: var(--tinta-2); text-decoration: none; }
.campana:hover, .campana.activa { background: var(--patina-suave); color: var(--patina); }
.campana i { font-size: 1.1rem; }
.campana-num { position: absolute; top: 1px; right: -2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #B5432D; color: #fff; font-size: .7rem; font-weight: 700; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--concreto); }
.campana-num[hidden] { display: none; }

.filtro-pildoras { display: flex; gap: .25rem; }
.filtro-pildoras a { padding: .2rem .7rem; border-radius: 999px; font-size: .85rem; color: var(--tinta-2); text-decoration: none; }
.filtro-pildoras a:hover { background: var(--concreto); }
.filtro-pildoras a.activo { background: var(--pizarra); color: #fff; }

.aviso-fila { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: .9rem; padding: .9rem 1.1rem; border-top: 1px solid var(--linea-suave); align-items: start; }
.aviso-fila.no-leido { background: #F6FAF9; }
.aviso-fila.por-confirmar { box-shadow: inset 4px 0 0 var(--ambar); }
.aviso-icono { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--concreto); color: var(--tinta-2); }
.aviso-icono.tipo-visita { background: #FBF0DA; color: #8A5A0B; }
.aviso-icono.tipo-paquete { background: #E7EEF6; color: #2F5675; }
.aviso-icono.tipo-recibo, .aviso-icono.tipo-cobranza { background: var(--patina-suave); color: var(--patina); }
.aviso-icono.tipo-asamblea { background: #EEE8F4; color: #5B3F7A; }
.aviso-icono.tipo-mensaje { background: #E5F1F4; color: #23606F; }
.aviso-titulo { font-weight: 600; }
.aviso-fila:not(.no-leido) .aviso-titulo { font-weight: 500; }
.aviso-titulo a { color: inherit; }
.aviso-texto { color: var(--tinta-2); font-size: .92rem; margin-top: .15rem; }
.aviso-pie { display: flex; flex-wrap: wrap; gap: .75rem; font-size: .8rem; color: var(--tinta-3); margin-top: .3rem; }
.aviso-acciones { display: flex; gap: .4rem; align-items: center; }
@media (max-width: 575.98px) { .aviso-fila { grid-template-columns: 32px minmax(0, 1fr); } .aviso-acciones { grid-column: 2; } .aviso-icono { width: 32px; height: 32px; } }
.punto-nuevo { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #B5432D; margin-right: .45rem; vertical-align: middle; }

.estado-lectura { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; white-space: nowrap; }
.estado-lectura.visto { color: #22603A; }
.estado-lectura.leido { color: #2F5675; }
.estado-lectura.sin-ver { color: var(--tinta-3); }
.constancias li { display: flex; justify-content: space-between; gap: .5rem; padding: .3rem 0; border-top: 1px solid var(--linea-suave); }

.est-pendiente { background: var(--ambar-suave); color: #7A4F06; }
.est-ok { background: #E1F0E6; color: #22603A; }
.est-cerrado { background: #ECEFED; color: #4A5752; }

.consulta-fila { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .8rem 1.1rem; border-top: 1px solid var(--linea-suave); color: inherit; text-decoration: none; }
.consulta-fila:hover { background: #F4F7F6; color: inherit; }
.consulta-fila.no-leido { background: #F6FAF9; }

.conversacion { padding: 1.1rem; display: flex; flex-direction: column; gap: .75rem; }
.burbuja { max-width: min(640px, 88%); padding: .7rem .95rem; border-radius: 12px; background: var(--concreto); }
.burbuja header { display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; margin-bottom: .2rem; font-size: .88rem; }
.burbuja.mia { align-self: flex-end; background: var(--patina-suave); border-bottom-right-radius: 4px; }
.burbuja.suya { align-self: flex-start; border-bottom-left-radius: 4px; }
.conversacion .responder { border-top: 1px solid var(--linea-suave); padding-top: 1rem; margin-top: .5rem; }

/* ----------------------------------------------------------------- Etapa 14: seguridad del acceso */
.seg-bloque { padding: 1rem 1.1rem; }
.pasos-2fa { padding-left: 1.2rem; margin: 0; }
.pasos-2fa li { margin-bottom: .5rem; }
.codigo-2fa { max-width: 11rem; font-family: var(--f-mono, ui-monospace, monospace); letter-spacing: .25em; text-align: center; font-size: 1.4rem; }
.qr-2fa { width: 190px; height: 190px; margin: 0 auto; background: #fff; padding: 6px; border: 1px solid var(--linea); border-radius: 8px; }
.qr-2fa svg { width: 100%; height: 100%; display: block; }
.clave-2fa { display: inline-block; font-size: .95rem; letter-spacing: .08em; background: var(--concreto); padding: .3rem .5rem; border-radius: 6px; color: var(--tinta); }
.codigos-respaldo { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.codigos-respaldo code { display: block; text-align: center; font-size: 1.05rem; padding: .45rem; background: var(--concreto); border-radius: 6px; color: var(--tinta); letter-spacing: .06em; }
.acceso-fallido td { background: #FDF5F3; }
.auth-separador { display: flex; align-items: center; gap: .75rem; margin: 1.25rem 0; color: var(--tinta-3); font-size: .85rem; }
.auth-separador::before, .auth-separador::after { content: ""; flex: 1; border-top: 1px solid var(--linea); }
.btn-google { display: flex; align-items: center; justify-content: center; gap: .6rem; background: #fff; }
.aviso-icono.tipo-seguridad { background: #FBEBEB; color: #8E2F1F; }