/* Sistema RRHH — Loup Estudio Contable
   Colores tomados del logo: azul marino y plateado. */
:root {
  --marino: #16305a;
  --marino-oscuro: #0d1f3d;
  --azul: #1f4a8a;
  --azul-claro: #e8eef7;
  --celeste: #5b8fd6;
  --plata: #c9d0da;
  --fondo: #f1f4f8;
  --borde: #dce3ec;
  --texto-suave: #64748b;
  --ancho-menu: 248px;
}
body { background: var(--fondo); color: #1e293b; font-size: .95rem; }
a { color: var(--azul); }

/* ---------- Menú lateral ---------- */
.lateral {
  position: fixed; inset: 0 auto 0 0; width: var(--ancho-menu); z-index: 1040;
  background: linear-gradient(180deg, var(--marino) 0%, var(--marino-oscuro) 100%);
  color: #e2e8f0; display: flex; flex-direction: column; overflow-y: auto;
}
.lateral-logo { display: block; background: #fff; margin: 14px 14px 10px; border-radius: 12px; padding: 10px 12px; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.lateral-logo img { width: 100%; height: auto; display: block; }
.lateral-usuario { display: flex; gap: 10px; align-items: center; padding: 10px 18px 14px; border-bottom: 1px solid rgba(255,255,255,.08); font-size: .85rem; }
.lateral-usuario > i { font-size: 1.8rem; color: var(--plata); }
.lateral-usuario > div { min-width: 0; }
.lateral-menu { padding: 8px 0 16px; flex: 1; }
.lateral-menu a { display: flex; align-items: center; gap: 12px; padding: 9px 20px; color: #cbd5e1; text-decoration: none; font-size: .9rem; border-left: 3px solid transparent; }
.lateral-menu a i { font-size: 1.05rem; width: 18px; text-align: center; }
.lateral-menu a:hover { background: rgba(255,255,255,.06); color: #fff; }
.lateral-menu a.activo { background: rgba(91,143,214,.18); color: #fff; border-left-color: var(--celeste); font-weight: 600; }
.lateral-menu a.deshabilitado { opacity: .45; cursor: default; }
.lateral-menu a.deshabilitado:hover { background: none; color: #cbd5e1; }
.lateral-titulo { text-transform: uppercase; font-size: .68rem; letter-spacing: .08em; color: #8ea2c0; padding: 14px 20px 4px; }
.pronto { margin-left: auto; font-size: .62rem; background: rgba(255,255,255,.12); padding: 1px 6px; border-radius: 8px; }
.lateral-pie { font-size: .7rem; color: #7f93b2; padding: 12px 20px; border-top: 1px solid rgba(255,255,255,.08); }

/* ---------- Barra superior ---------- */
.con-menu .contenido { margin-left: var(--ancho-menu); min-height: 100vh; }
.superior {
  position: sticky; top: 0; z-index: 1030; display: flex; align-items: center; gap: 12px;
  background: linear-gradient(90deg, var(--marino-oscuro), var(--marino)); color: #fff;
  padding: 10px 24px; box-shadow: 0 2px 10px rgba(13,31,61,.25);
}
.superior-empresa { flex: 1; min-width: 0; }
.superior-empresa .nombre { font-weight: 700; font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.superior-empresa .datos { font-size: .78rem; color: #b8c6dc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.superior-acciones { display: flex; align-items: center; gap: 14px; }
.selector-empresa { min-width: 210px; background-color: rgba(255,255,255,.95); }
.icono-superior { position: relative; color: #fff; font-size: 1.3rem; text-decoration: none; padding: 0 2px; }
.icono-superior:hover { color: var(--plata); }
.globo { position: absolute; top: -4px; right: -9px; background: #e5484d; color: #fff; font-size: .62rem; font-weight: 700; border-radius: 10px; padding: 1px 5px; }
.area { padding: 22px 24px 40px; max-width: 1600px; }
.area-ancha { padding: 22px 24px 40px; }

/* ---------- Tarjetas e indicadores ---------- */
.tarjeta { background: #fff; border: 1px solid var(--borde); border-radius: 12px; padding: 1.15rem 1.25rem; box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.tarjeta h2 { font-size: .98rem; font-weight: 700; margin-bottom: .8rem; color: var(--marino); }
.tarjeta-titulo { display: flex; justify-content: space-between; align-items: center; background: var(--marino); color: #fff; margin: -1.15rem -1.25rem 1rem; padding: .75rem 1.25rem; border-radius: 12px 12px 0 0; }
.tarjeta-titulo h2 { color: #fff; margin: 0; }
.indicadores { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); background: #fff; border: 1px solid var(--borde); border-radius: 12px; }
.indicador { padding: 14px 18px; border-right: 1px solid var(--borde); min-width: 0; }
.indicador:last-child { border-right: 0; }
.indicador .rotulo { font-size: .78rem; color: var(--texto-suave); display: flex; gap: 6px; align-items: center; }
.indicador .valor { font-size: 1.55rem; font-weight: 700; color: var(--marino); margin: 4px 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.indicador .valor.verde { color: #198754; }
.indicador .nota { font-size: .75rem; color: var(--texto-suave); }
.cifra { font-size: 2rem; font-weight: 600; color: var(--marino); line-height: 1; }

/* Banner del estudio */
.banner {
  position: relative; overflow: hidden; border-radius: 14px; color: #fff; min-height: 100%;
  background: radial-gradient(circle at 85% 20%, rgba(91,143,214,.45), transparent 45%),
              linear-gradient(135deg, #1f4a8a 0%, var(--marino) 55%, var(--marino-oscuro) 100%);
  display: grid; grid-template-columns: 1fr 1.05fr; align-items: center; gap: 10px; padding: 22px 24px;
}
.banner .etiqueta { display: inline-block; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.25); padding: 2px 10px; border-radius: 20px; font-size: .7rem; font-weight: 700; letter-spacing: .06em; }
.banner h2 { font-size: 1.45rem; font-weight: 700; margin: 10px 0 6px; color: #fff; }
.banner p { color: #d6e0ee; font-size: .9rem; margin-bottom: 14px; }
.banner .ilustracion { width: 100%; height: auto; }
.chip { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.2); border-radius: 20px; padding: 4px 12px; font-size: .8rem; text-decoration: none; margin: 0 6px 6px 0; }
.chip:hover { background: rgba(255,255,255,.24); color: #fff; }

/* Pasos del mes */
.pasos-mes { list-style: none; padding: 0; margin: 0; }
.pasos-mes li { display: flex; align-items: center; gap: 10px; padding: 7px 0; color: var(--texto-suave); font-size: .9rem; }
.pasos-mes .n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: .8rem; font-weight: 700; background: #e9eef5; color: var(--texto-suave); flex: none; }
.pasos-mes li.hecho { color: #198754; }
.pasos-mes li.hecho .n { background: #d1f0df; color: #198754; }
.pasos-mes li.actual { color: var(--marino); font-weight: 700; }
.pasos-mes li.actual .n { background: var(--marino); color: #fff; box-shadow: 0 0 0 4px rgba(22,48,90,.15); }

/* Recordatorios */
.avisos { max-height: 330px; overflow-y: auto; }
.aviso { display: flex; gap: 10px; align-items: flex-start; padding: 9px 2px; border-bottom: 1px solid #eef2f7; font-size: .86rem; color: inherit; text-decoration: none; }
.aviso:last-child { border-bottom: 0; }
.aviso i { font-size: 1.05rem; margin-top: 1px; }
a.aviso:hover { background: #f7f9fc; }

/* Listas cortas */
.lista-corta .fila { display: flex; justify-content: space-between; gap: 8px; padding: 7px 0; border-bottom: 1px dashed #e5eaf1; font-size: .87rem; }
.lista-corta .fila:last-child { border-bottom: 0; }
.fecha-caja { min-width: 46px; text-align: center; border-radius: 8px; background: var(--azul-claro); color: var(--marino); font-weight: 700; line-height: 1.1; padding: 4px 0; font-size: .95rem; }
.fecha-caja small { display: block; font-size: .62rem; font-weight: 600; text-transform: uppercase; }
.accesos a { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 6px; border-radius: 10px; border: 1px solid var(--borde); text-decoration: none; color: var(--marino); font-size: .82rem; font-weight: 600; text-align: center; background: #fff; height: 100%; }
.accesos a i { font-size: 1.5rem; color: var(--azul); }
.accesos a:hover { border-color: var(--celeste); background: var(--azul-claro); }

/* Tablas y formularios */
.tabla-planilla { font-size: .875rem; }
.tabla-planilla th { white-space: nowrap; background: var(--azul-claro); position: sticky; top: 0; z-index: 1; }
.tabla-planilla td input { min-width: 4.5rem; max-width: 6rem; }
.tabla-planilla .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabla-planilla tfoot td { font-weight: 600; background: #f0f2f5; }
.table > thead th { color: var(--marino); font-size: .82rem; }
.col-auto-dato { color: #6c757d; }
.neto { font-weight: 600; color: var(--marino); }
.errorlist { color: #b02a37; font-size: .85rem; padding-left: 0; list-style: none; margin: .25rem 0 0; }
.campo-error input, .campo-error select { border-color: #b02a37; }
.estado-CERRADA { background: #d1e7dd; color: #0f5132; }
.estado-BORRADOR { background: #fff3cd; color: #664d03; }
.estado-NINGUNA { background: #f8d7da; color: #842029; }
.etiqueta-estado { padding: .2rem .55rem; border-radius: 1rem; font-size: .8rem; font-weight: 600; white-space: nowrap; }
.btn-primary { background: var(--marino); border-color: var(--marino); }
.btn-primary:hover, .btn-primary:focus { background: var(--azul); border-color: var(--azul); }
.btn-outline-primary { color: var(--azul); border-color: var(--azul); }
.btn-outline-primary:hover { background: var(--azul); border-color: var(--azul); }

/* ---------- Pantalla de ingreso ---------- */
.ingreso { min-height: 100vh; display: grid; grid-template-columns: 1.15fr 1fr; }
.ingreso-arte {
  background: radial-gradient(circle at 80% 15%, rgba(91,143,214,.45), transparent 45%),
              linear-gradient(140deg, #1f4a8a 0%, var(--marino) 50%, var(--marino-oscuro) 100%);
  color: #fff; display: flex; flex-direction: column; justify-content: center; padding: 48px 56px;
}
.ingreso-arte h1 { font-size: 2rem; font-weight: 700; margin-bottom: .5rem; }
.ingreso-arte p { color: #d6e0ee; max-width: 460px; }
.ingreso-arte .ilustracion { max-width: 560px; width: 100%; margin-top: 18px; }
.ingreso-form { display: flex; align-items: center; justify-content: center; padding: 32px; background: #fff; }
.ingreso-caja { width: 100%; max-width: 380px; }
.ingreso-caja img { width: 100%; max-width: 320px; display: block; margin: 0 auto 28px; }

/* ---------- Responsivo ---------- */
.velo { display: none; }
@media (max-width: 1399px) { .indicadores { grid-template-columns: repeat(3, minmax(0, 1fr)); } .indicador:nth-child(3) { border-right: 0; } .indicador:nth-child(-n+3) { border-bottom: 1px solid var(--borde); } }
@media (max-width: 991px) {
  .lateral { transform: translateX(-100%); transition: transform .2s; }
  .menu-abierto .lateral { transform: none; }
  .menu-abierto .velo { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 1035; }
  .con-menu .contenido { margin-left: 0; }
  .superior { padding: 10px 16px; }
  .area, .area-ancha { padding: 16px; }
  .banner { grid-template-columns: 1fr; }
  .ingreso { grid-template-columns: 1fr; }
  .ingreso-arte { display: none; }
}
@media (max-width: 575px) { .indicadores { grid-template-columns: repeat(2, minmax(0, 1fr)); } .indicador { border-right: 0 !important; border-bottom: 1px solid var(--borde); } }
@media print {
  .no-imprimir { display: none !important; }
  body { background: #fff; }
  .con-menu .contenido { margin-left: 0; }
  main { padding: 0 !important; }
}

/* ---------- Logo y color del recibo (editar empresa) ---------- */
.logo-caja { width: 150px; height: 80px; border: 1px dashed var(--borde); border-radius: 10px; display: grid; place-items: center; background: #fff; flex: none; overflow: hidden; }
.logo-caja img { max-width: 100%; max-height: 100%; object-fit: contain; }
.muestra-color { width: 32px; height: 32px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--borde); cursor: pointer; padding: 0; }
.muestra-color.elegido { box-shadow: 0 0 0 2px var(--marino); transform: scale(1.1); }
.recibo-muestra { --rc: #1f3a5f; --rc-claro: #e8eef6; --rc-texto: #fff; border: 1px solid #333; border-radius: 6px; padding: 14px; background: #fff; font-size: .8rem; }
.rm-cab { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid var(--rc); padding-bottom: 8px; }
.rm-logo { width: 54px; height: 36px; display: grid; place-items: center; }
.rm-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.rm-titulo { color: var(--rc); font-weight: 700; }
.rm-tablas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0; }
.rm-th { background: var(--rc-claro); font-weight: 600; padding: 3px 6px; }
.rm-fila { display: flex; justify-content: space-between; padding: 2px 6px; border-bottom: 1px dotted #bbb; }
.rm-neto { display: flex; justify-content: space-between; background: var(--rc); color: var(--rc-texto); font-weight: 700; padding: 6px 8px; }

/* Dato que viene de otro módulo (solo lectura) */
.modulo-dato { display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--borde); border-left: 3px solid var(--celeste); border-radius: 8px; padding: 8px 12px; background: #f8fafc; min-width: 220px; }
.modulo-dato b { color: var(--marino); font-size: 1rem; }

/* Agrupación por departamento */
.fila-depto td { background: var(--marino) !important; color: #fff; font-weight: 600; font-size: .85rem; }
.fila-subtotal td { background: #eef2f7 !important; font-weight: 600; }
input.sugerido { border-color: var(--celeste); background: #f3f8ff; }

/* Reportes */
.tarjeta-enlace:hover { border-color: var(--celeste); box-shadow: 0 4px 14px rgba(15,23,42,.08); }
.vista-previa { background: #fff; border: 1px solid var(--borde); border-radius: 12px; padding: 16px; }
.vp-cab { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid; padding-bottom: 10px; margin-bottom: 12px; gap: 12px; }
.vp-logo { max-height: 52px; max-width: 140px; object-fit: contain; }
.tabla-reporte { border: 0; box-shadow: none; }
.tabla-reporte table { font-size: .78rem; }
.tabla-reporte thead th { background: var(--rc) !important; color: var(--rc-texto) !important; white-space: nowrap; font-size: .74rem; }
.tabla-reporte .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rep-depto td { background: var(--rc-claro) !important; font-weight: 700; }
.rep-subtotal td { font-weight: 700; border-top: 1.5px solid var(--rc); }
.rep-total td { background: var(--rc) !important; color: var(--rc-texto) !important; font-weight: 700; }
.fila-depto td { cursor: pointer; }
.fila-depto[aria-expanded="false"] .bi-chevron-down { transform: rotate(-90deg); }
.chip-depto { font-size: .78rem; text-decoration: none; border: 1px solid var(--borde); border-radius: 20px; padding: 2px 10px; background: #fff; color: var(--marino); }
.chip-depto span { background: var(--azul-claro); border-radius: 10px; padding: 0 6px; margin-left: 4px; }
.chip-depto:hover { border-color: var(--celeste); }
.tabla-planilla tfoot td { position: sticky; bottom: 0; }
.tabla-planilla td input[type=checkbox] { min-width: 0; max-width: none; width: 1.1rem; height: 1.1rem; }
.fila-depto .text-muted { color: rgba(255,255,255,.75) !important; }