/* FMA Flex | Centro de Gestión Operativa
   Identidad: azul FMA (#313b70, tomado del logo) sobre neutros fríos;
   títulos en Quicksand (redondeada como el logo), texto en Figtree.
   Layout: menú lateral azul fijo, barra superior con búsqueda y accesos rápidos. */
:root {
  --fma: #313b70;            /* azul del logo */
  --fma-oscuro: #262e59;
  --fma-claro: #e8eaf4;
  --bg: #f3f4f8;
  --sup: #ffffff;
  --sup-2: #eef0f6;
  --tinta: #1b2040;
  --tinta-2: #5a6184;
  --linea: #dde0ea;
  --primario: #313b70;
  --primario-tinta: #ffffff;
  --enlace: #2f4ea8;
  --ok: #24744f;      --ok-suave: #dcefe5;
  --adv: #9a5f00;     --adv-suave: #f7ead2;
  --crit: #b3362b;    --crit-suave: #f8e0dd;
  --info: #2f58a8;    --info-suave: #dfe7f6;
  --neutro: #5a6184;  --neutro-suave: #eceef4;
  --sombra: 0 1px 2px rgb(27 32 64 / .06), 0 6px 18px rgb(27 32 64 / .06);
  --radio: 10px;
  --f-titulo: "Quicksand", "Segoe UI", system-ui, sans-serif;
  --f-texto: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
  --lateral: 252px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #11142a; --sup: #191d36; --sup-2: #20254a; --tinta: #e7e9f4; --tinta-2: #a1a7c6; --linea: #2c3256;
    --primario: #8d9ae8; --primario-tinta: #0f1330; --enlace: #9fb3f5; --fma-claro: #262c55;
    --ok: #6cc69a; --ok-suave: #173326; --adv: #e5ad4f; --adv-suave: #3a2c12; --crit: #f08479; --crit-suave: #3d1d1a;
    --info: #8eb0f0; --info-suave: #1b2747; --neutro: #a1a7c6; --neutro-suave: #242a4c;
    --sombra: 0 1px 2px rgb(0 0 0 / .35), 0 8px 24px rgb(0 0 0 / .3); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #11142a; --sup: #191d36; --sup-2: #20254a; --tinta: #e7e9f4; --tinta-2: #a1a7c6; --linea: #2c3256;
  --primario: #8d9ae8; --primario-tinta: #0f1330; --enlace: #9fb3f5; --fma-claro: #262c55;
  --ok: #6cc69a; --ok-suave: #173326; --adv: #e5ad4f; --adv-suave: #3a2c12; --crit: #f08479; --crit-suave: #3d1d1a;
  --info: #8eb0f0; --info-suave: #1b2747; --neutro: #a1a7c6; --neutro-suave: #242a4c;
  --sombra: 0 1px 2px rgb(0 0 0 / .35), 0 8px 24px rgb(0 0 0 / .3); color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--tinta); font: 14.5px/1.45 var(--f-texto); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--enlace); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--enlace); outline-offset: 2px; border-radius: 6px; }
[hidden] { display: none !important; }
.sec { color: var(--tinta-2); font-size: 13px; }
.num, td.num, .tabular { font-variant-numeric: tabular-nums; }
svg.i { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cargando-app { display: grid; place-items: center; height: 100vh; color: var(--tinta-2); font-family: var(--f-titulo); font-weight: 600; }

/* ---------- estructura ---------- */
.app { display: grid; grid-template-columns: var(--lateral) minmax(0, 1fr); min-height: 100vh; }
.lateral { background: var(--fma); color: #fff; position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column;
  padding: max(14px, env(safe-area-inset-top, 0px)) 12px 16px max(12px, env(safe-area-inset-left, 0px)); }
.lateral .logo { display: block; width: 168px; height: auto; margin: 0 auto 6px; }
.lateral .marca { text-align: center; font: 600 11px/1.3 var(--f-titulo); letter-spacing: .18em; text-transform: uppercase; opacity: .85; margin-bottom: 14px; }
.menu { display: flex; flex-direction: column; gap: 1px; }
.menu .grupo { font: 600 10.5px/1 var(--f-titulo); letter-spacing: .16em; text-transform: uppercase; opacity: .6; margin: 14px 10px 6px; }
.menu a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: #fff; opacity: .86; font-weight: 500; }
.menu a:hover { background: rgb(255 255 255 / .09); text-decoration: none; opacity: 1; }
.menu a[aria-current="page"] { background: #fff; color: var(--fma); opacity: 1; font-weight: 600; }
.menu .cuenta { margin-left: auto; font: 600 11px/1 var(--f-texto); background: #d2483c; color: #fff; padding: 3px 7px; border-radius: 99px; }
.menu a[aria-current="page"] .cuenta { background: var(--crit); }
.lateral .pie { margin-top: auto; padding: 14px 10px 0; font-size: 12px; opacity: .75; }

.principal { min-width: 0; display: flex; flex-direction: column; }
.barra { position: sticky; top: 0; z-index: 20; background: var(--sup); border-bottom: 1px solid var(--linea); display: flex; align-items: center; gap: 10px;
  padding: max(10px, env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px)) 10px 20px; }
.barra .buscar { flex: 1; max-width: 520px; position: relative; }
.barra .buscar input { width: 100%; padding: 8px 12px 8px 36px; border: 1px solid var(--linea); border-radius: 9px; background: var(--sup-2); }
.barra .buscar svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--tinta-2); }
.barra .espacio { flex: 1; }
.resultados { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--sup); border: 1px solid var(--linea); border-radius: 10px; box-shadow: var(--sombra); max-height: 70vh; overflow: auto; z-index: 30; }
.resultados a { display: grid; grid-template-columns: 110px minmax(0,1fr); gap: 10px; padding: 8px 12px; color: var(--tinta); border-top: 1px solid var(--linea); }
.resultados a:first-child { border-top: 0; }
.resultados a:hover, .resultados a.activo { background: var(--sup-2); text-decoration: none; }
.resultados .tipo { font-size: 11.5px; color: var(--tinta-2); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; padding-top: 2px; }
.contenido { padding: 22px max(24px, env(safe-area-inset-right, 0px)) 48px 24px; max-width: 1480px; width: 100%; }
.hamburguesa { display: none; }

.demo-aviso { background: var(--adv-suave); color: var(--tinta); border-bottom: 1px solid var(--linea); padding: 8px 20px; font-size: 13px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.demo-aviso select { width: auto; padding: 3px 6px; }

/* ---------- encabezado de página ---------- */
.cabecera { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.cabecera h1 { font: 700 26px/1.15 var(--f-titulo); margin: 0; letter-spacing: -.01em; text-wrap: balance; }
.cabecera .sub { color: var(--tinta-2); margin-top: 4px; font-size: 13.5px; }
.cabecera .acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.ceja { font: 600 11px/1 var(--f-titulo); letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-2); }
.migas { font-size: 13px; color: var(--tinta-2); margin-bottom: 6px; }
.migas a { color: var(--tinta-2); }

/* ---------- botones y formularios ---------- */
.btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--linea); background: var(--sup); color: var(--tinta); padding: 7px 12px; border-radius: 8px; font-weight: 600; font-size: 13.5px; white-space: nowrap; text-decoration: none; }
.btn:hover { border-color: var(--tinta-2); text-decoration: none; }
.btn.primario { background: var(--primario); border-color: var(--primario); color: var(--primario-tinta); }
.btn.primario:hover { filter: brightness(1.1); }
.btn.peligro { color: var(--crit); }
.btn.peligro.lleno { background: var(--crit); border-color: var(--crit); color: #fff; }
.btn.fantasma { background: transparent; border-color: transparent; color: var(--tinta-2); }
.btn.fantasma:hover { background: var(--sup-2); color: var(--tinta); }
.btn.chico { padding: 4px 9px; font-size: 12.5px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn-icono { border: 0; background: none; color: var(--tinta-2); padding: 6px; border-radius: 7px; display: inline-grid; place-items: center; position: relative; }
.btn-icono:hover { background: var(--sup-2); color: var(--tinta); }
.btn-icono .punto { position: absolute; top: 0; right: 0; background: var(--crit); color: #fff; font-size: 10.5px; font-weight: 700; min-width: 17px; height: 17px; border-radius: 99px; display: grid; place-items: center; padding: 0 4px; }

input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=time], input[type=search], input[type=tel], input[type=month], select, textarea {
  width: 100%; min-width: 0; background: var(--sup); border: 1px solid var(--linea); border-radius: 8px; padding: 7px 10px; font-size: 14px; }
textarea { min-height: 72px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--fma-claro); border-color: var(--enlace); }
.campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.campo > span { font-size: 12.5px; font-weight: 600; color: var(--tinta-2); }
.campo > span .req { color: var(--crit); }
.campo .ayuda { font-size: 12px; color: var(--tinta-2); }
.campo .error { font-size: 12px; color: var(--crit); font-weight: 600; }
.campo.invalido input, .campo.invalido select, .campo.invalido textarea { border-color: var(--crit); }
.rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.rejilla .ancho { grid-column: 1 / -1; }
.rejilla .seccion { grid-column: 1 / -1; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--linea); }
.casilla { display: flex; gap: 8px; align-items: center; font-size: 14px; }
.casilla input { width: 16px; height: 16px; accent-color: var(--primario); }
.multi { border: 1px solid var(--linea); border-radius: 8px; padding: 6px 8px; max-height: 150px; overflow: auto; display: flex; flex-direction: column; gap: 4px; background: var(--sup); }

/* ---------- filtros ---------- */
.filtros { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.filtros select, .filtros input { width: auto; min-width: 150px; }
.filtros input[type=search] { min-width: 220px; }
.filtros input[type=checkbox], .filtros input[type=radio] { min-width: 0; width: 16px; flex: none; }
.filtros .limpiar { margin-left: 2px; }
.segmentos { display: inline-flex; background: var(--sup-2); border-radius: 9px; padding: 3px; gap: 2px; flex-wrap: wrap; }
.segmentos button { border: 0; background: none; padding: 5px 11px; border-radius: 7px; font-size: 13px; font-weight: 600; color: var(--tinta-2); }
.segmentos button[aria-pressed="true"] { background: var(--sup); color: var(--tinta); box-shadow: var(--sombra); }
.segmentos .n { margin-left: 5px; font-weight: 500; opacity: .75; font-variant-numeric: tabular-nums; }

/* ---------- tarjetas, paneles, indicadores ---------- */
.panel { background: var(--sup); border: 1px solid var(--linea); border-radius: 12px; padding: 16px 18px; min-width: 0; }
.panel > h2, .panel > header h2 { font: 700 15.5px/1.3 var(--f-titulo); margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.panel > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.panel > header h2 { margin: 0; }
.panel .sub { color: var(--tinta-2); font-weight: 500; font-size: 13px; }
.rejilla-paneles { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.c12 { grid-column: span 12; } .c8 { grid-column: span 8; } .c7 { grid-column: span 7; } .c6 { grid-column: span 6; } .c5 { grid-column: span 5; } .c4 { grid-column: span 4; } .c3 { grid-column: span 3; }
.indicadores { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-bottom: 16px; }
.indicador { background: var(--sup); border: 1px solid var(--linea); border-radius: 12px; padding: 13px 15px; display: flex; flex-direction: column; gap: 3px; text-align: left; color: var(--tinta); min-width: 0; }
a.indicador:hover, button.indicador:hover { border-color: var(--tinta-2); text-decoration: none; }
.indicador .et { font-size: 12.5px; color: var(--tinta-2); font-weight: 600; }
.indicador .v { font: 700 26px/1.15 var(--f-titulo); font-variant-numeric: tabular-nums; letter-spacing: -.01em; overflow-wrap: anywhere; }
.indicador .v.chico { font-size: 19px; }
.indicador .d { font-size: 12.5px; color: var(--tinta-2); }
.indicador.crit .v { color: var(--crit); } .indicador.adv .v { color: var(--adv); } .indicador.ok .v { color: var(--ok); }
.barra-prog { height: 6px; background: var(--sup-2); border-radius: 99px; overflow: hidden; margin-top: 6px; }
.barra-prog i { display: block; height: 100%; background: var(--fma); border-radius: 99px; }
:root[data-theme="dark"] .barra-prog i { background: var(--primario); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .barra-prog i { background: var(--primario); } }

.ficha-cab { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.datos { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px 18px; margin: 0; }
.datos div { min-width: 0; }
.datos dt { font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--tinta-2); font-weight: 600; }
.datos dd { margin: 3px 0 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.pestanas { display: flex; gap: 2px; border-bottom: 1px solid var(--linea); margin: 18px 0 16px; overflow-x: auto; }
.pestanas button { border: 0; background: none; padding: 9px 13px; font-weight: 600; color: var(--tinta-2); border-bottom: 2px solid transparent; white-space: nowrap; }
.pestanas button[aria-selected="true"] { color: var(--tinta); border-bottom-color: var(--primario); }
.pestanas .n { font-weight: 500; opacity: .7; margin-left: 4px; }

/* ---------- etiquetas de estado ---------- */
.estado { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 99px; font-size: 12px; font-weight: 600; white-space: nowrap; background: var(--neutro-suave); color: var(--neutro); }
.estado.ok { background: var(--ok-suave); color: var(--ok); } .estado.adv { background: var(--adv-suave); color: var(--adv); }
.estado.crit { background: var(--crit-suave); color: var(--crit); } .estado.info { background: var(--info-suave); color: var(--info); }
.prioridad { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--tinta-2); }
.prioridad::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--linea); }
.prioridad.alta::before { background: var(--adv); } .prioridad.urgente::before { background: var(--crit); } .prioridad.media::before { background: var(--info); }
.etq { display: inline-block; font-size: 12px; padding: 1px 7px; border-radius: 5px; background: var(--sup-2); color: var(--tinta-2); font-weight: 600; }
.vence { font-size: 12.5px; font-variant-numeric: tabular-nums; }
.vence.crit { color: var(--crit); font-weight: 700; } .vence.adv { color: var(--adv); font-weight: 700; }
.ejemplo { color: var(--adv); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }

/* ---------- tablas ---------- */
.tabla-caja { overflow-x: auto; border: 1px solid var(--linea); border-radius: 12px; background: var(--sup); }
table.tabla { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabla th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-2); font-weight: 700; padding: 10px 12px; border-bottom: 1px solid var(--linea); background: var(--sup-2); position: sticky; top: 0; white-space: nowrap; }
.tabla th button { border: 0; background: none; padding: 0; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; }
.tabla td { padding: 9px 12px; border-bottom: 1px solid var(--linea); vertical-align: top; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla tbody tr.clic { cursor: pointer; }
.tabla tbody tr.clic:hover { background: var(--sup-2); }
.tabla td.num, .tabla th.num { text-align: right; white-space: nowrap; }
.tabla .sec { color: var(--tinta-2); font-size: 12.5px; }
.tabla .acc { text-align: right; white-space: nowrap; }
.tabla tr.anulado td { opacity: .55; text-decoration: line-through; }
.pie-tabla { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 2px 0; font-size: 13px; color: var(--tinta-2); flex-wrap: wrap; }
.vacio { padding: 32px 18px; text-align: center; color: var(--tinta-2); border: 1px dashed var(--linea); border-radius: 12px; background: var(--sup); }
.vacio b { display: block; color: var(--tinta); font: 700 16px var(--f-titulo); margin-bottom: 6px; }
.vacio p { margin: 0 auto 12px; max-width: 56ch; }

/* ---------- listas ---------- */
.lista { display: flex; flex-direction: column; }
.lista > .item { display: flex; gap: 10px; padding: 9px 0; border-top: 1px solid var(--linea); align-items: flex-start; }
.lista > .item:first-child { border-top: 0; }
.item .cuerpo { flex: 1; min-width: 0; }
.item .t { font-weight: 600; overflow-wrap: anywhere; }
.item .m { font-size: 12.5px; color: var(--tinta-2); margin-top: 2px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.alerta { display: grid; grid-template-columns: 4px minmax(0, 1fr); gap: 12px; background: var(--sup-2); border-radius: 10px; padding: 10px 12px 10px 0; }
.alerta + .alerta { margin-top: 8px; }
.alerta .franja { border-radius: 0 4px 4px 0; background: var(--info); }
.alerta.critica .franja { background: var(--crit); } .alerta.advertencia .franja { background: var(--adv); }
.alerta .t { font-weight: 600; } .alerta .d { font-size: 13px; color: var(--tinta-2); margin-top: 2px; }
.alerta .fila { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.alerta.atendida { opacity: .75; } .alerta.resuelta { opacity: .55; }
.feed .item .cuando { font-size: 12px; color: var(--tinta-2); white-space: nowrap; min-width: 92px; font-variant-numeric: tabular-nums; }
.cambios { margin: 6px 0 0; font-size: 12.5px; color: var(--tinta-2); display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px 10px; }
.cambios dt { font-weight: 600; } .cambios dd { margin: 0; overflow-wrap: anywhere; }
.cambios s { opacity: .7; }

/* ---------- kanban ---------- */
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 6px; align-items: start; }
.columna { background: var(--sup-2); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 140px; }
.columna.soltar { outline: 2px dashed var(--enlace); outline-offset: -2px; }
.columna > h3 { margin: 2px 4px 2px; font: 700 13.5px var(--f-titulo); display: flex; justify-content: space-between; }
.tarjeta { background: var(--sup); border: 1px solid var(--linea); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; text-align: left; color: var(--tinta); width: 100%; }
.tarjeta:hover { border-color: var(--tinta-2); }
.tarjeta .t { font-weight: 600; overflow-wrap: anywhere; }
.tarjeta .m { font-size: 12.5px; color: var(--tinta-2); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

/* ---------- calendario ---------- */
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal .dia-sem { font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--tinta-2); font-weight: 700; padding: 4px 6px; }
.cal .dia { min-height: 108px; background: var(--sup); border: 1px solid var(--linea); border-radius: 8px; padding: 5px 6px; display: flex; flex-direction: column; gap: 3px; text-align: left; min-width: 0; }
.cal .dia.fuera { opacity: .45; } .cal .dia.hoy { border-color: var(--fma); box-shadow: inset 0 0 0 1px var(--fma); }
.cal .dia.sel { background: var(--fma-claro); }
.cal .dia .n { font-weight: 700; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.cal .ev { font-size: 11.5px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 4px; }
.cal .mas { font-size: 11px; color: var(--tinta-2); }
.marca-ev { width: 8px; height: 8px; border-radius: 2px; flex: none; display: inline-block; background: var(--neutro); }
.marca-ev.contrato { background: #b3362b; } .marca-ev.pago { background: #6a43a8; } .marca-ev.factura { background: #9a5f00; }
.marca-ev.renovacion { background: #c2577a; } .marca-ev.ingreso { background: #24744f; } .marca-ev.salida { background: #5a6184; }
.marca-ev.tarea { background: #2f58a8; } .marca-ev.visita { background: #0f7f86; } .marca-ev.preventivo { background: #7b6a1f; }
.marca-ev.liquidacion { background: #313b70; } .marca-ev.otro { background: #8a8fa8; }
.marca-ev.vencimiento { background: #b3362b; } .marca-ev.actualizacion { background: #0d6e5f; }

/* ---------- gráficos ---------- */
.grafico { width: 100%; height: auto; display: block; }
.grafico text { fill: var(--tinta-2); font: 11.5px var(--f-texto); }
.grafico .eje { stroke: var(--linea); }
.grafico .serie-a { fill: var(--fma); } .grafico .serie-b { fill: #8fa0d8; } .grafico .serie-c { fill: var(--crit); }
:root[data-theme="dark"] .grafico .serie-a { fill: var(--primario); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .grafico .serie-a { fill: var(--primario); } }
.barras-h { display: flex; flex-direction: column; gap: 7px; }
.barras-h .f { display: grid; grid-template-columns: minmax(90px, 34%) minmax(0, 1fr) max-content; gap: 10px; align-items: center; font-size: 13px; }
.barras-h .f .et { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barras-h .f .b { height: 10px; background: var(--sup-2); border-radius: 99px; overflow: hidden; }
.barras-h .f .b i { display: block; height: 100%; background: var(--fma); border-radius: 99px; }
:root[data-theme="dark"] .barras-h .f .b i { background: var(--primario); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .barras-h .f .b i { background: var(--primario); } }
.barras-h .f .v { font-variant-numeric: tabular-nums; color: var(--tinta-2); font-weight: 600; }
.leyenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--tinta-2); margin-top: 6px; }
.leyenda span { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- paneles flotantes ---------- */
.velo { position: fixed; inset: 0; background: rgb(15 18 40 / .42); z-index: 50; }
.cajon { position: fixed; top: 0; right: 0; bottom: 0; width: min(640px, 100%); background: var(--bg); z-index: 51; display: flex; flex-direction: column; box-shadow: -12px 0 40px rgb(0 0 0 / .2);
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); padding-right: env(safe-area-inset-right, 0px); }
.cajon.ancho { width: min(900px, 100%); }
.cajon > header { display: flex; align-items: center; gap: 10px; padding: 14px 20px; background: var(--sup); border-bottom: 1px solid var(--linea); }
.cajon > header h2 { margin: 0; flex: 1; min-width: 0; font: 700 18px/1.25 var(--f-titulo); overflow-wrap: anywhere; }
.cajon > .cuerpo { flex: 1; overflow: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.cajon > footer { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; padding: 12px 20px; background: var(--sup); border-top: 1px solid var(--linea); }
.dialogo { position: fixed; z-index: 61; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(480px, calc(100% - 32px)); background: var(--sup); border-radius: 14px; box-shadow: var(--sombra); padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.dialogo h2 { margin: 0; font: 700 18px var(--f-titulo); }
.dialogo .botones { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.velo.alto { z-index: 60; }
#avisos { position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 70; display: flex; flex-direction: column; gap: 8px; max-width: min(420px, calc(100% - 40px)); }
.aviso { background: var(--tinta); color: var(--bg); padding: 10px 14px; border-radius: 10px; box-shadow: var(--sombra); font-size: 14px; }
.aviso.error { background: var(--crit); color: #fff; }
.aviso.ok { background: var(--ok); color: #fff; }
.menu-flotante { position: absolute; right: 0; top: calc(100% + 6px); background: var(--sup); border: 1px solid var(--linea); border-radius: 10px; box-shadow: var(--sombra); min-width: 220px; padding: 6px; z-index: 40; display: flex; flex-direction: column; }
.menu-flotante button, .menu-flotante a { border: 0; background: none; text-align: left; padding: 8px 10px; border-radius: 7px; color: var(--tinta); display: flex; gap: 8px; align-items: center; }
.menu-flotante button:hover, .menu-flotante a:hover { background: var(--sup-2); text-decoration: none; }
.menu-flotante hr { border: 0; border-top: 1px solid var(--linea); margin: 4px 0; }
.relativo { position: relative; }

/* ---------- acceso ---------- */
.acceso { min-height: 100vh; display: grid; place-items: center; padding: 24px max(16px, env(safe-area-inset-right, 0px)) 24px max(16px, env(safe-area-inset-left, 0px)); background: var(--bg); }
.acceso .caja { width: min(420px, 100%); background: #fff; border-radius: 16px; box-shadow: var(--sombra); padding: 28px; display: flex; flex-direction: column; gap: 14px; color: #1b2040; }
.acceso .caja img { width: 180px; height: auto; align-self: center; }
.acceso h1 { font: 700 20px/1.25 var(--f-titulo); text-align: center; margin: 0; color: #313b70; }
.acceso p { margin: 0; color: #5a6184; font-size: 14px; text-align: center; }
.acceso input { background: #fff; color: #1b2040; border-color: #dde0ea; }
.acceso .btn.primario { background: #313b70; border-color: #313b70; color: #fff; justify-content: center; padding: 10px; }
.acceso-form { display: flex; flex-direction: column; gap: 14px; }
.acceso .enlace { border: 0; background: none; color: #2f4ea8; font-weight: 600; align-self: center; }
.acceso .campo > span { color: #5a6184; }
.mensaje { padding: 10px 12px; border-radius: 9px; font-size: 13.5px; }
.mensaje.error { background: #f8e0dd; color: #8e2a21; } .mensaje.ok { background: #dcefe5; color: #1c5c3e; } .mensaje.info { background: var(--info-suave); color: var(--tinta); }

/* ---------- documentos, fotos y enlaces ---------- */
.docs { border-radius: 12px; transition: box-shadow .15s; }
.docs.soltar { box-shadow: 0 0 0 2px var(--enlace); background: var(--info-suave); }
.docs-barra { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.docs-barra .docs-ayuda { font-size: 12.5px; }
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; margin-bottom: 14px; }
.miniatura { border: 1px solid var(--linea); background: var(--sup-2); border-radius: 10px; padding: 0; overflow: hidden; display: flex; flex-direction: column; text-align: left; color: var(--tinta); min-width: 0; }
.miniatura img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--sup-2); }
.miniatura span { font-size: 12px; padding: 6px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.miniatura:hover { border-color: var(--enlace); }
.miniatura.sin-imagen img { visibility: hidden; }
.visor { background: var(--sup-2); border-radius: 10px; display: grid; place-items: center; margin-bottom: 14px; min-height: 120px; }
.visor img { max-width: 100%; max-height: 70vh; border-radius: 8px; display: block; }
.doc-nombre { display: flex; gap: 8px; align-items: flex-start; } .doc-nombre svg { margin-top: 2px; color: var(--tinta-2); }

/* ---------- novedades ---------- */
.muro { display: flex; flex-direction: column; gap: 12px; max-width: 860px; }
.novedad { background: var(--sup); border: 1px solid var(--linea); border-radius: 12px; padding: 14px 16px 12px 18px; position: relative; min-width: 0; }
.novedad::before, .novedad-ficha::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 4px; border-radius: 0 4px 4px 0; background: transparent; }
.novedad-ficha { position: relative; }
.prio-importante::before { background: var(--adv) !important; } .prio-urgente::before { background: var(--crit) !important; }
.novedad.sin-leer { border-color: var(--enlace); box-shadow: 0 0 0 1px var(--enlace) inset; }
.novedad.fijada { background: linear-gradient(var(--fma-claro), var(--fma-claro)) top / 100% 3px no-repeat, var(--sup); }
.nov-cab { display: flex; gap: 10px; align-items: center; }
.nov-meta { flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.35; }
.nov-meta .sec { font-size: 12.5px; }
.nov-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.novedad .nov-chips:not(:empty) { margin-top: 10px; }
.novedad-ficha .nov-chips { margin-left: auto; }
.nov-chips .etq { display: inline-flex; gap: 4px; align-items: center; } .nov-chips .etq svg { width: 14px; height: 14px; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--fma); color: #fff; display: inline-grid; place-items: center; font: 700 12px/1 var(--f-titulo); flex: none; letter-spacing: .02em; }
.avatar.chico { width: 26px; height: 26px; font-size: 10.5px; }
.punto-nuevo { background: var(--enlace); color: var(--sup); font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 99px; }
.novedad h3 { font: 700 16px/1.3 var(--f-titulo); margin: 8px 0 4px; text-wrap: balance; }
.novedad h3 a { color: var(--tinta); }
.nov-cuerpo { margin: 6px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; max-width: 72ch; }
.nov-cuerpo.corto { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; color: var(--tinta-2); font-size: 13.5px; }
.nov-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 140px)); gap: 8px; margin-top: 10px; }
.nov-fotos .miniatura img { aspect-ratio: 1; }
.mas-fotos { display: grid; place-items: center; border-radius: 10px; background: var(--sup-2); font-weight: 700; }
.nov-pie { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; font-size: 12.5px; align-items: center; }
.nov-pie span { display: inline-flex; gap: 4px; align-items: center; } .nov-pie svg { width: 15px; height: 15px; }
.nov-fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.nov-fila .novedad { background: var(--sup-2); border-color: transparent; }
.nov-fila .novedad.sin-leer { border-color: var(--enlace); }
.hilo { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.hilo li { display: flex; gap: 10px; align-items: flex-start; }
.hilo li > div { flex: 1; min-width: 0; background: var(--sup-2); border-radius: 10px; padding: 8px 12px; }
.hilo p { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.cambio-estado { font-size: 13px; margin-top: 4px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.nov-responder { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--linea); padding-top: 14px; }
.fila-acciones { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; justify-content: space-between; }

/* ---------- integraciones ---------- */
.integracion { display: flex; gap: 14px; align-items: flex-start; }
.integracion .logo-int { width: 40px; height: 40px; border-radius: 10px; background: var(--sup-2); display: grid; place-items: center; flex: none; color: var(--fma); }
.pasos { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.codigo { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; background: var(--sup-2); padding: 2px 6px; border-radius: 5px; overflow-wrap: anywhere; }

/* ---------- impresión (PDF desde el navegador) ---------- */
.en-claude [data-imprimir] { display: none !important; }
@media print {
  .lateral, .barra, .no-imprimir, .demo-aviso, #avisos { display: none !important; }
  .app { display: block; }
  body { background: #fff; color: #000; }
  .panel, .indicador, .tabla-caja { break-inside: avoid; box-shadow: none; }
  .contenido { padding: 0; }
}

/* ---------- pantallas chicas ---------- */
@media (max-width: 1100px) {
  .c8, .c7, .c6, .c5, .c4 { grid-column: span 12; }
  .c3 { grid-column: span 6; }
}
@media (max-width: 960px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .lateral { position: fixed; z-index: 45; left: 0; top: 0; bottom: 0; width: min(280px, 86%); transform: translateX(-102%); transition: transform .2s; }
  .app.menu-abierto .lateral { transform: none; box-shadow: 10px 0 40px rgb(0 0 0 / .3); }
  .hamburguesa { display: inline-grid; }
  .barra { padding-left: max(12px, env(safe-area-inset-left, 0px)); }
  .contenido { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .rejilla { grid-template-columns: minmax(0, 1fr); }
  .barra .crear-texto { display: none; }
}
@media (max-width: 640px) {
  .c3 { grid-column: span 12; }
  .barra .espacio { display: none; }
  .barra { gap: 6px; }
  .demo-aviso { font-size: 12.5px; padding: 6px 14px; }
  .cal .dia { min-height: 54px; } .cal .ev, .cal .mas { display: none; }
  .cal .puntos { display: flex !important; }
  .filtros select, .filtros input:not([type=checkbox]):not([type=radio]), .filtros input[type=search] { min-width: 0; flex: 1 1 140px; }
  .cabecera h1 { font-size: 22px; }
}
.cal .puntos { display: none; gap: 3px; flex-wrap: wrap; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
.contacto-rapido { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.acciones-contacto { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.acciones-contacto .btn.chico { padding: 2px 8px; }
.acceso-o { display: flex; align-items: center; gap: 10px; color: #5a6184; font-size: 13px; }
.acceso-o::before, .acceso-o::after { content: ""; flex: 1; border-top: 1px solid #dde0ea; }
.acceso .btn.acceso-google { justify-content: center; padding: 10px; background: #fff; color: #1b2040; border-color: #c9cddc; font-weight: 600; }
.acceso .btn.acceso-google:hover { background: #f3f4f8; }
.acceso .acceso-pie { font-size: 13.5px; }
.acceso .acceso-pie .enlace { padding: 0; font-size: inherit; }
.fila-invitar { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(0, 1.4fr) auto; gap: 10px; align-items: end; }
@media (max-width: 760px) { .fila-invitar { grid-template-columns: minmax(0, 1fr); } }
.pasos-grandes { margin: 0; padding-left: 22px; display: grid; gap: 16px; }
.pasos-grandes > li { padding-left: 4px; }
.pasos-grandes code, .tabla code { font-size: 12.5px; background: var(--sup-2); padding: 1px 5px; border-radius: 5px; }