*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--ds-font-family,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif);font-size:14px;background:var(--ds-color-bg-app,#f0f4f8);color:#1a2332}
a{text-decoration:none;color:inherit}
code{overflow-wrap:break-word}

.layout{display:grid;grid-template-columns:224px 1fr;min-height:100vh}
.layout-inmersivo{display:block}

/* Sidebar -- proporciones/espaciados del rediseño visual V2 (referencia
   aprobada: 224px, padding exterior 22px 0, bloques internos con 18px
   horizontal). Logica de datos/permisos sin cambios -- ver templates/base.html,
   esto es solo static/css/main.css. */
.sidebar{background:var(--ds-color-sidebar-bg,#0C447C);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto;padding:22px 0}
.sidebar-header{padding:0 18px 18px;border-bottom:1px solid rgba(255,255,255,.12)}
.sidebar-title{font-size:16px;font-weight:700;color:#fff}
.sidebar-sub{font-size:11.5px;color:rgba(255,255,255,.6);margin-top:3px}
.sidebar-nav{padding:8px 8px 0;flex:1}
.nav-label{font-size:10px;font-weight:600;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:.8px;padding:8px 8px 3px}
.nav-item{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:7px;margin-bottom:2px;font-size:13.5px;color:rgba(255,255,255,.7);transition:background var(--ds-motion-hover,.12s),color var(--ds-motion-hover,.12s)}
.nav-item::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.45;flex-shrink:0}
.nav-item:hover{background:rgba(255,255,255,.08);color:#fff}
.nav-item.active{background:rgba(255,255,255,.16);color:#fff;font-weight:600}
.nav-item.active::before{opacity:1}
.sidebar-footer{margin-top:auto;padding:16px 18px 0;border-top:1px solid rgba(255,255,255,.12)}
.logout-btn{font-size:13px;color:rgba(255,255,255,.65);display:block;padding:6px 0}
.logout-btn:hover{color:#fff}

/* Main */
/* min-width:0 -- sin esto, la columna 1fr del grid .layout nunca se encoge mas
   alla del ancho de contenido de su hijo mas ancho (ej. una tabla), forzando
   scroll horizontal en toda la pagina en viewports angostos. */
.main{padding:28px 32px;min-width:0}
.main-inmersivo{padding:0;min-width:0}
.page-header{margin-bottom:24px}
.page-header h1{font-size:22px;font-weight:700;color:#0C447C}

/* Subnav */
.subnav{display:flex;gap:4px;margin-top:12px;border-bottom:1px solid #d0dce8;padding-bottom:0;overflow-x:auto}
.subnav a{padding:7px 14px;font-size:13px;color:#6b7a90;border-bottom:2px solid transparent;margin-bottom:-1px;display:block;flex-shrink:0}
.subnav a:hover{color:#185FA5}
.subnav a.active{color:#0C447C;font-weight:600;border-bottom-color:#185FA5}

/* KPI */
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:24px}
.kpi{background:#fff;border:.5px solid #d0dce8;border-radius:10px;padding:14px 16px}
.kpi-label{font-size:11px;font-weight:500;color:#6b7a90;text-transform:uppercase;letter-spacing:.4px;margin-bottom:6px}
.kpi-value{font-size:20px;font-weight:700;color:#0C447C}

/* Society cards */
.soc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.soc-card{background:#fff;border:.5px solid #d0dce8;border-radius:10px;padding:16px;display:block;transition:border-color .15s,transform .1s}
.soc-card:hover{border-color:#185FA5;transform:translateY(-1px)}
.soc-name{font-size:14px;font-weight:600;color:#0C447C;margin-bottom:6px}
.soc-link{font-size:12px;color:#6b7a90}

/* Section */
.section{background:#fff;border:.5px solid #d0dce8;border-radius:10px;padding:20px 24px;margin-bottom:16px}
.section h2{font-size:14px;font-weight:600;color:#0C447C;margin-bottom:16px}

/* Table */
.table{width:100%;border-collapse:collapse;font-size:13px}
.table th{text-align:left;padding:8px 12px;font-size:11px;font-weight:600;color:#6b7a90;text-transform:uppercase;border-bottom:1px solid #e4ecf4;background:#f8fafd}
.table td{padding:10px 12px;border-bottom:.5px solid #eef2f8}
.table tr:last-child td{border-bottom:none}
.table tr:hover td{background:#f8fafd}

/* Form */
.form-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
/* Variante de 2 columnas -- para formularios que tambien se abren
   dentro del sidepanel (ancho fijo de 420px, ver sidepanel.css): 3
   columnas ahi deja cada campo demasiado angosto (etiquetas cortadas,
   inputs apretados). Se combina con .form-grid, nunca la reemplaza:
   <div class="form-grid form-grid-2">. */
.form-grid-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:640px){
  .form-grid, .form-grid-2{grid-template-columns:1fr}
}
/* min-width:0 -- sin esto, un hijo de grid nunca se encoge mas alla
   del ancho minimo intrinseco de su contenido (ver "grid blowout"),
   asi que un <input type="date"> (que impone su propio minimo nativo
   segun el navegador) puede desbordar la columna por unos pixeles en
   contenedores angostos como el sidepanel. */
.field{display:flex;flex-direction:column;gap:4px;min-width:0}
.field label{font-size:12px;font-weight:500;color:#6b7a90}
.field input,.field select,.field textarea{padding:8px 10px;border:1px solid #d0dce8;border-radius:6px;font-size:13px;color:#1a2332;background:#fff;font-family:inherit}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:#185FA5;box-shadow:0 0 0 3px rgba(24,95,165,.1)}
.field textarea{resize:vertical;min-height:68px}

/* Buttons */
.btn{display:inline-block;padding:8px 16px;background:#185FA5;color:#fff;border:none;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;font-family:inherit}
.btn:hover{background:#0C447C}
.btn-sm{padding:5px 10px;font-size:12px}

/* Badges */
.badge{display:inline-block;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:500;background:#E6F1FB;color:#0C447C}
.badge-activo{background:#E6F1FB;color:#0C447C}
.badge-taller{background:#FAEEDA;color:#633806}
.badge-alquilado{background:#EEEDFE;color:#3C3489}
.badge-inactivo{background:#F1EFE8;color:#5F5E5A}
.badge-en-mantenimiento{background:#FAEEDA;color:#633806}
.badge-fuera-de-circulacion{background:#F1EFE8;color:#5F5E5A}
.badge-vendido{background:#EEEDFE;color:#3C3489}
.badge-retirado{background:#F1EFE8;color:#5F5E5A}
.badge-excelente{background:#EAF3DE;color:#27500A}
.badge-atencion{background:#FAEEDA;color:#633806}
.badge-riesgo{background:#FDEBD3;color:#7A3E0A}
.badge-critico{background:#FCEBEB;color:#791F1F}
.badge-pendiente{background:#FAEEDA;color:#633806}
.badge-pagada{background:#EAF3DE;color:#27500A}
.badge-vencida{background:#FCEBEB;color:#791F1F}
.badge-admin{background:#E6F1FB;color:#0C447C}
.badge-usuario{background:#F1EFE8;color:#5F5E5A}

/* Colors */
.pos{color:#27500A}
.neg{color:#A32D2D}

/* Flash */
.flash{padding:10px 14px;border-radius:8px;font-size:13px;margin-bottom:12px}
.flash-success{background:#EAF3DE;color:#27500A;border-left:3px solid #639922}
.flash-error{background:#FCEBEB;color:#791F1F;border-left:3px solid #E24B4A}
.flash-warning{background:#FFF6E0;color:#7A5800;border-left:3px solid #E0A646}

/* Login */
.login-body{background:#f0f4f8;min-height:100vh;display:flex;align-items:center;justify-content:center}
.login-wrap{width:100%;display:flex;align-items:center;justify-content:center;padding:2rem}
.login-card{background:#fff;border:.5px solid #d0dce8;border-radius:14px;padding:40px 36px;width:380px}
.login-icon{font-size:36px;text-align:center;display:block;margin-bottom:10px}
.login-title{font-size:20px;font-weight:700;color:#0C447C;text-align:center}
.login-sub{font-size:13px;color:#6b7a90;text-align:center;margin-bottom:24px;margin-top:4px}
.login-card .field{margin-bottom:14px}
.btn-login{width:100%;padding:10px;background:#185FA5;color:#fff;border:none;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;margin-top:8px}
.btn-login:hover{background:#0C447C}

/* Society card extras */
.soc-bar-bg{height:4px;background:#E6F1FB;border-radius:2px;margin-top:8px}
.soc-bar-fill{height:4px;border-radius:2px;background:#185FA5}
.soc-bar-fill.neg{background:#A32D2D}
.soc-util{font-size:12px;margin-top:6px}
.soc-meta{font-size:11px;color:#6b7a90;margin-top:4px}

/* Form select small */
.form-select-sm{padding:6px 10px;border:1px solid #d0dce8;border-radius:6px;font-size:13px;color:#1a2332;background:#fff;font-family:inherit}

/* Btn secondary */
.btn-secondary{background:#f0f4f8;color:#1a2332;border:1px solid #d0dce8}
.btn-secondary:hover{background:#e4ecf4}

/* Badge estados colaborador */
.badge-activo{background:#EAF3DE;color:#27500A}
.badge-suspendido{background:#FAEEDA;color:#633806}
.badge-retirado{background:#F1EFE8;color:#5F5E5A}
.badge-vacaciones{background:#E6F1FB;color:#0C447C}
.badge-incapacitado{background:#FCEBEB;color:#791F1F}

/* Mini progress bar for rankings */
.mini-bar-bg{height:6px;background:#E6F1FB;border-radius:3px;min-width:80px}
.mini-bar-fill{height:6px;border-radius:3px;background:#185FA5;transition:width .3s}

/* Proyectos grid */
.proy-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:16px}
.proy-card{background:#fff;border:.5px solid #d0dce8;border-radius:10px;padding:16px;transition:border-color .15s}
.proy-card:hover{border-color:#185FA5}
.proy-nombre{font-size:14px;font-weight:600;color:#0C447C}
.proy-nombre:hover{color:#185FA5}

/* Tareas */
.tarea-item{padding:10px 0;border-bottom:.5px solid #eef2f8}
.tarea-item:last-child{border-bottom:none}
.tarea-done{opacity:.6}

/* Badge prioridades */
.badge-prio-alta{background:#FCEBEB;color:#791F1F}
.badge-prio-media{background:#FAEEDA;color:#633806}
.badge-prio-baja{background:#EAF3DE;color:#27500A}

/* Badge estados proyecto */
.badge-activo{background:#EAF3DE;color:#27500A}
.badge-en-pausa{background:#FAEEDA;color:#633806}
.badge-completado{background:#E6F1FB;color:#0C447C}
.badge-cancelado{background:#F1EFE8;color:#5F5E5A}
.badge-en-progreso{background:#E6F1FB;color:#0C447C}
.badge-bloqueada{background:#FCEBEB;color:#791F1F}

/* Danger button */
.btn-danger{background:#FCEBEB;color:#791F1F;border:1px solid #E24B4A}
.btn-danger:hover{background:#E24B4A;color:#fff}

/* Nav section separators -- sin borde entre secciones (solo espaciado),
   para coincidir con la referencia aprobada. */
.nav-section{
  font-size:10.5px;font-weight:600;color:rgba(255,255,255,.5);
  text-transform:uppercase;letter-spacing:.8px;
  padding:12px 10px 6px;
}
.nav-section:first-child{padding-top:4px}

/* Remove old nav-label style conflict */
.nav-label{display:none}

/* Document cards */
.doc-card{
  display:flex;align-items:flex-start;gap:12px;
  padding:14px;background:#fff;border:.5px solid #d0dce8;
  border-radius:10px;text-decoration:none;color:inherit;
  transition:border-color .15s,box-shadow .15s;
}
.doc-card:hover{border-color:#185FA5;box-shadow:0 2px 8px rgba(24,95,165,.1)}
.doc-icon{
  width:36px;height:36px;border-radius:8px;background:#E6F1FB;
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:700;color:#0C447C;flex-shrink:0;
}
.doc-nombre{font-size:13px;font-weight:600;color:#0C447C;margin-bottom:2px}
.doc-tipo{font-size:11px;color:#6b7a90}
.doc-desc{font-size:11px;color:#6b7a90;margin-top:3px}

/* Search in sidebar */
.sidebar-search{padding:16px 10px 10px}
.search-input{width:100%;box-sizing:border-box;padding:8px 11px;border-radius:8px;border:none;background:rgba(255,255,255,.12);color:#fff;font-size:13px;outline:none}
.search-input::placeholder{color:rgba(255,255,255,.4)}
.search-input:focus{background:rgba(255,255,255,.18)}

/* Alerts badge */
.alerta-btn{display:block;padding:7px 10px;background:rgba(252,235,235,.15);border:1px solid rgba(226,75,74,.4);border-radius:7px;font-size:12px;color:#FFB3B3;text-align:center}
.alerta-btn:hover{background:rgba(252,235,235,.25)}

.nav-add-btn{display:block;margin-top:6px;padding:8px 10px;background:rgba(255,255,255,.06);border:1px dashed rgba(255,255,255,.3);border-radius:7px;font-size:12px;color:rgba(255,255,255,.65);text-align:center}
.nav-add-btn:hover{background:rgba(255,255,255,.12);color:#fff}
.nav-add-btn:focus-visible{outline:2px solid #fff;outline-offset:1px}

/* Subtabs inside contabilidad */
.subtab-bar{display:flex;gap:4px;margin-bottom:16px;background:#fff;border:.5px solid #d0dce8;border-radius:8px;padding:4px;overflow-x:auto}
.subtab-item{padding:6px 14px;border-radius:6px;font-size:13px;color:#6b7a90;cursor:pointer;flex-shrink:0}
.subtab-item:hover{background:#f0f4f8;color:#0C447C}
.subtab-item.active{background:#E6F1FB;color:#0C447C;font-weight:600}

/* Export link in subnav */
.subnav-export{margin-left:auto;padding:5px 10px;font-size:11px;font-weight:600;color:#185FA5;border:1px solid #d0dce8;border-radius:4px;background:#fff}
.subnav-export:hover{background:#E6F1FB}

/* Pestana de Alertas: parpadeo en rojo cuando hay alertas pendientes,
   para llamar la atencion del usuario sin que tenga que entrar a
   revisar manualmente cada sociedad. */
.subnav-alerta-blink{color:#C0282B !important;animation:parpadeo-alerta 1.4s ease-in-out infinite}
@keyframes parpadeo-alerta{0%,100%{opacity:1}50%{opacity:.35}}
.subnav-alerta-badge{display:inline-block;background:#C0282B;color:#fff;font-size:10px;font-weight:700;padding:1px 6px;border-radius:10px;margin-left:4px}

/* Lista de detalle del modulo Alertas */
.alertas-lista{display:flex;flex-direction:column;gap:8px}
.alerta-item{display:block;padding:12px 16px;border-radius:8px;border:1px solid #d0dce8;text-decoration:none;transition:transform .1s}
.alerta-item:hover{transform:translateX(2px)}
.alerta-item-tipo{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px}
.alerta-item-desc{font-size:14px;font-weight:600;color:#1a2332;margin:2px 0}
.alerta-item-meta{font-size:12px;color:#6b7a90}
.alerta-warning{background:#FFFBF0;border-color:#F0D896}
.alerta-warning .alerta-item-tipo{color:#8a6200}
.alerta-danger{background:#FCEBEB;border-color:#E24B4A}
.alerta-danger .alerta-item-tipo{color:#C0282B}

/* Planilla */
.oculto{display:none}

/* Selector de periodo reutilizable (clic para desplegar) */
.periodo-selector{margin-bottom:14px}
.periodo-titulo:hover{color:#185FA5}
.periodo-panel{margin-top:10px;padding:14px;background:#f7f9fc;border:1px solid #d0dce8;border-radius:8px;max-width:fit-content}
.periodo-mes-btn{display:block;text-align:center;padding:8px 4px;border-radius:6px;border:1px solid #d0dce8;background:#fff;color:#1a2332;font-size:13px;text-decoration:none}
.periodo-mes-btn:hover{background:#E6F1FB;border-color:#185FA5}
.periodo-mes-activo{background:#185FA5;color:#fff;border-color:#185FA5;font-weight:600}