/* Lo propio de Cuentas Claras sobre el Design System. Sin colores nuevos: solo tokens.
   Desvío declarado: margen lateral más chico que el token, pedido por Mateo (TSK-LCF-003, S12). */
@font-face { font-family: Figtree; src: url("/fonts/Figtree-Variable.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }
:root { --font-sans: Figtree, "Segoe UI", sans-serif; }
.app-shell main, .app-shell main.sin-encabezado { --margen-main: 16px; }
@media (max-width: 800px) { .app-shell main { --margen-main: 12px; } }

/* Formulario de opciones del design system */
.opciones { padding: 4px 22px 22px; display: flex; flex-direction: column; gap: var(--espacio-m); }
.opciones-grupo h3 { font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin: 6px 0 4px; }
.opcion-fila { display: grid; grid-template-columns: minmax(200px, 1.2fr) minmax(180px, 1fr) minmax(220px, auto); align-items: center; gap: var(--espacio-m); padding: 10px 0; border-bottom: 1px solid var(--line); }
.opcion-texto { display: flex; flex-direction: column; gap: 2px; }
.opcion-texto label { font-weight: 600; font-size: 13px; margin: 0; }
.opcion-texto small { color: var(--muted); font-size: 11px; }
.opcion-control select, .opcion-control input:not([type="checkbox"]) { width: 100%; max-width: 320px; margin: 0; }
.opcion-switch { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 400; }
.opcion-origen { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
.opcion-origen .subtle { font-size: 11px; min-height: 26px; padding: 2px 8px; gap: 4px; }
@media (max-width: 900px) { .opcion-fila { grid-template-columns: 1fr; gap: 8px; } .opcion-origen { justify-content: flex-start; } }

/* Marca propia, sin logo de Edison */
.cc-marca { font-size: 25px !important; letter-spacing: -0.7px !important; }
.sidebar-collapsed .cc-marca { display: none; }
.cc-pronto-nav { opacity: 0.55; }
.sidebar-toggle { align-self: flex-end; }

/* Menú de usuario */
.cc-perfil { position: relative; }
.cc-menu-usuario { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 25; display: grid; gap: 1px; padding: 6px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-control); box-shadow: var(--sombra-menu); }
.cc-menu-usuario button { width: auto !important; display: flex; justify-content: flex-start; gap: 10px; min-height: 32px; padding: 6px 10px; color: var(--ink); font-size: 13px; font-weight: 400; border-radius: 6px; }
.cc-menu-usuario button:hover { background: var(--paper); }

/* Campana */
.cc-campana-zona { position: relative; }
.cc-campana { position: absolute; right: 0; top: calc(100% + 4px); z-index: 40; width: min(380px, calc(100vw - 32px)); display: grid; gap: 2px; padding: 12px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-control); box-shadow: var(--sombra-menu); font-size: 13px; color: var(--ink); }
.cc-campana strong { padding: 0 8px 6px; }
.cc-campana button { justify-content: flex-start; gap: 10px; border: 0; background: transparent; font-weight: 400; padding: 6px 8px; text-align: left; }
.cc-campana button:hover { background: var(--paper); }

/* Tabla */
th .titulo-columna-orden.cc-orden-blanco, .titulo-columna[aria-expanded="true"] { color: #fff; }
.titulo-columna-flecha { display: inline-flex; }
.cc-multiple { min-height: 90px; background-image: none; padding-right: 11px; }
.cc-entra { color: var(--ok); font-weight: 600; }
.danger-text { color: var(--danger); }
.record-description { color: var(--muted); }
.badge.muted { background: var(--line); color: var(--muted); }
.badge.amber { background: var(--warn-soft); color: var(--warn); }

/* Ficha */
.pagina-ficha .ficha-cabecera { display: flex; justify-content: space-between; gap: 16px; }
.cc-lateral { display: grid; gap: 18px; font-size: 13px; }
.cc-lateral h3 { font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.cc-avance { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cc-avance li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; }
.cc-avance em { font-style: normal; color: var(--muted); font-size: 12px; }
.cc-avance i { grid-column: 1 / -1; height: 4px; border-radius: 99px; background: var(--line); overflow: hidden; display: block; }
.cc-avance b { display: block; height: 100%; background: var(--teal); }
@media (max-width: 900px) { .pagina-cuerpo { grid-template-columns: minmax(0, 1fr); } }
.cc-sin-dato { font-style: italic; color: var(--muted); }
.cc-aviso { background: var(--warn-soft); color: var(--warn); border-radius: var(--radius-control); padding: 10px 12px; font-size: 12px; margin-bottom: 12px; }
.cc-nota { margin: 0 14px 12px; }
.cc-separado { margin-top: 12px; }
.cc-actividad, .cc-relaciones { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 13px; }
.cc-actividad li { border-left: 2px solid var(--line); padding-left: 10px; }
.cc-actividad small { display: block; color: var(--muted); }
.cc-antes { color: var(--err); }
.cc-despues { color: var(--ok); font-weight: 600; }
.cc-relaciones li { display: flex; align-items: center; gap: 8px; }
.cc-relaciones .icon-button { margin-left: auto; }
.cc-mini th { position: static; }
.cc-clave code { display: block; padding: 12px; margin: 10px 0 14px; background: var(--paper); border-radius: var(--radius-control); font-size: 16px; text-align: center; user-select: all; word-break: normal; overflow-wrap: anywhere; }
.confirm-overlay.cc-confirmar { position: fixed; z-index: 200; }
.confirm-box { max-width: 440px; }
.confirm-box .actions { justify-content: flex-end; margin-top: 12px; }
.cc-clave-form { margin-bottom: 10px; max-width: 640px; }

/* Importar */
.cc-pasos { display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; margin: 0 0 14px; padding: 0; font-size: 12px; color: var(--muted); }
.cc-pasos .activo { color: var(--teal); font-weight: 600; }
.cc-zona-archivo { border: 2px dashed var(--line); border-radius: var(--radius-control); padding: 26px 16px; text-align: center; display: grid; gap: 8px; justify-items: center; margin-bottom: 10px; }
.cc-stat-importar { margin: 12px 0 0; padding: 8px 14px; gap: 20px; flex-wrap: wrap; }
.cc-stat-importar > div { display: grid; gap: 0; padding-right: 20px; }
.cc-stat-importar strong { font-size: 22px; }
.cc-dudosas { display: grid; gap: 10px; }
.cc-dudosa { border: 1px solid var(--line); border-radius: var(--radius-control); padding: 8px 12px 10px; margin: 0; min-width: 0; }
.cc-dudosa legend { font-size: 12px; font-weight: 600; padding: 0 4px; }
.cc-lados { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 8px; font-size: 13px; overflow-wrap: anywhere; }
.cc-lados small { display: block; color: var(--muted); font-size: 11px; }
@media (max-width: 800px) { .cc-lados { grid-template-columns: minmax(0, 1fr); } }

/* Importar */
.cc-dudosa input[type="radio"] { display: inline-block; width: 16px; height: 16px; min-height: 0; padding: 0; margin: 0; accent-color: var(--teal); flex: none; }
.cc-dudosa .actions { gap: 18px; }
.cc-dudosa label { margin: 0; }
.cc-nota-duda { margin: 0 0 8px; font-size: 12px; color: var(--warn); }

/* Inicio */
.stat-row > div > div { display: grid; gap: 1px; }
.stat-row strong { font-size: 22px; line-height: 1.15; white-space: nowrap; }
.stat-row { gap: 22px; padding: 8px 18px; justify-content: space-between; }
.stat-row > div { padding-right: 22px; flex: 1 1 0; min-width: 0; }
.entity-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .entity-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 800px) { .entity-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.entity-card.cc-pronto { background: var(--paper); box-shadow: none; }

.cc-zona-archivo { cursor: pointer; font-weight: 400; }
.cc-zona-archivo.sobre { border-color: var(--teal); background: var(--teal-soft); }
.multi-options { display: flex; flex-wrap: wrap; gap: 6px 16px; padding-top: 4px; }
.cc-codigo { display: block; padding: 10px 12px; background: var(--paper); border-radius: var(--radius-control); font-size: 12px; overflow-x: auto; white-space: pre; word-break: normal; }
.cc-mes-input { width: auto; margin: 0; }
tr[data-dash-periodo] { cursor: pointer; }
.cc-mini th, .cc-mini td { white-space: normal; }

/* Planilla */
.cc-tabs { padding: 0; margin-bottom: var(--espacio-m); flex: none; }
.cc-control { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 12px; font-weight: 600; color: var(--muted); }
.cc-control select { width: auto; min-width: 130px; margin: 0; font-size: 12px; font-weight: 400; }
.cc-barra { flex-wrap: wrap; }
.cc-barra .cc-derecha { margin-left: auto; width: 32px; min-height: 32px; color: var(--muted); }
.cc-mes { margin-bottom: var(--espacio-s); flex: none; }
.cc-planilla .table-wrap table { width: max-content; min-width: 100%; }
.cc-planilla th { white-space: nowrap; }
.cc-planilla th:first-child, .cc-planilla td:first-child { min-width: 220px; }
.cc-planilla th.num, .cc-planilla td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 92px; }
.cc-planilla .cc-cat td { background: var(--teal-soft); color: var(--teal-dark); font-weight: 600; }
.cc-planilla .cc-sub td:first-child { padding-left: 34px; color: var(--muted); }
.cc-planilla .cc-total td { background: var(--paper); font-weight: 600; border-top: 1px solid var(--line); }
.cc-planilla .cc-ingresos td { color: var(--ok); }
.cc-planilla tbody tr:hover > td { background: var(--paper); }
.cc-planilla tbody tr.cc-cat:hover > td { background: var(--teal-soft); }
.cc-plegar { display: inline-flex; gap: 6px; align-items: center; min-height: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; }
.cc-plegar:hover { background: none; }
.cc-celda { min-height: 0; padding: 1px 4px; margin: -1px -4px; border: 0; background: none; color: inherit; font: inherit; font-weight: inherit; border-radius: 4px; }
.cc-celda:hover { background: var(--teal-soft); color: var(--teal-dark); text-decoration: underline; }
.cc-prop { display: inline-block; width: 44px; height: 6px; margin-right: 8px; border-radius: 99px; background: var(--line); overflow: hidden; vertical-align: middle; }
.cc-prop i { display: block; height: 100%; background: var(--teal); }
.cc-prop-celda { min-width: 120px !important; }
.badge.red { background: var(--err-soft); color: var(--err); }

/* Dashboards */
.cc-bloque { margin-bottom: var(--espacio-m); flex: none !important; }
.cc-cuerpo { padding: 0 22px 16px; }
.cc-dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espacio-m); }
.cc-grafico { width: 100%; height: auto; display: block; }
.cc-grilla { stroke: var(--line); }
.cc-eje { fill: var(--muted); font-size: 11px; }
.cc-serie-1 { fill: var(--teal); }
.cc-serie-2 { fill: var(--sello-ambar); }
.cc-serie-1:hover, .cc-serie-2:hover, .cc-serie-1:focus, .cc-serie-2:focus { opacity: 0.8; outline: none; }
.cc-leyenda { display: flex; gap: 16px; font-size: 12px; color: var(--muted); margin-top: 6px; }
.cc-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.cc-leyenda i { width: 10px; height: 10px; border-radius: 3px; }
.cc-punto-1 { background: var(--teal); }
.cc-punto-2 { background: var(--sello-ambar); }
.cc-hbars { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 13px; }
.cc-hbars li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px; }
.cc-hbars i { grid-column: 1 / -1; height: 8px; border-radius: 99px; background: var(--paper); overflow: hidden; display: block; }
.cc-hbars b { display: block; height: 100%; background: var(--teal); border-radius: 99px; }
.cc-tip { position: fixed; z-index: 310; background: var(--ink); color: #fff; font-size: 12px; padding: 6px 9px; border-radius: 6px; white-space: pre-line; pointer-events: none; box-shadow: var(--sombra-menu); }
@media (max-width: 900px) { .cc-dos { grid-template-columns: minmax(0, 1fr); } }

.saltar-al-contenido:not(:focus) { pointer-events: none; }
@media (max-width: 800px) {
  .toolbar { flex-wrap: wrap; }
  .toolbar .search { flex: 1 0 100%; }
  .toolbar .boton-orden { margin-left: auto; }
  .catalog-panel tr.object-row td.cell-name { order: -2; grid-column: 1 / -1; }
  .catalog-panel tr.object-row td.cell-actions { order: -1; grid-column: 1 / -1; grid-row: auto; justify-self: end; }
}
@media (max-width: 800px) { .stat-row { flex-wrap: wrap; gap: 12px; padding: 8px 12px; } .stat-row > div { border: 0; padding-right: 0; } .stat-row strong { font-size: 20px; } .topbar { padding-block: 6px; } }
/* Sin movimiento para quien lo pidió: incluye botones y tarjetas. */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }