@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

/* ====== Variables & Base ====== */
:root{
  --bg:#f6f8ff;
  --card:#ffffff;
  --line:#e7ecff;
  --text:#1f2937;
  --muted:#6b7a9a;
  --brand:#0b56f1;
  --brand-2:#164ed2;
  --danger:#e53935;
  --ok:#22c55e;
  --radius:14px;
  --shadow:0 10px 22px rgba(11,86,241,.06);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial;
  font-size:14px;
  line-height:1.5;
  color:var(--text);
  background:var(--bg);
  padding:22px 0;
}

/* ====== Layout ====== */
.container{
  width:100%;
  max-width:1900px;
  margin:0 auto;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px;
  position:relative;
}

h2{
  margin:0 0 12px 0;
  font-size:22px;
  color:var(--brand);
  display:flex;
  align-items:center;
  gap:10px;
}

/* ====== Botonera / Buttons ====== */
.btn-secundario, button {
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:#eef3ff;
  color:var(--brand);
  border:1px solid var(--line);
  padding:10px 14px;
  border-radius:10px;
  cursor:pointer;
  text-decoration:none;
  transition:background .2s ease, transform .02s ease;
  font-weight:600;
}
.btn-secundario:hover, button:hover{ background:#e4ecff }
.btn-secundario:active, button:active{ transform:translateY(1px) }

.btn-primario{
  background:var(--brand);
  color:#fff;
  border:0;
}
.btn-primario:hover{ background:var(--brand-2) }

.btn-logout{
  border:none;
  background:var(--danger);
  color:#fff;
  font-size:.85rem;
  padding:6px 10px;
  border-radius:8px;
  cursor:pointer;
}
.btn-logout:hover{ background:#c62828 }

.botonera-principal { display:flex; flex-wrap:wrap; gap:10px; }

/* ====== Session badge ====== */
.session-info{
  position:absolute;
  top:12px;
  right:12px;
  display:flex;
  align-items:center;
  gap:8px;
  font-size:.95rem;
  color:#37474f;
  background:#f7fafc;
  border:1px solid var(--line);
  padding:6px 10px;
  border-radius:10px;
}
.session-info .muted{ color:#607d8b }
.session-info i{ opacity:.85 }

/* ====== Filtros ====== */
.filtros-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:12px;
  margin:8px 0 14px 0;
}
.campo{ display:flex; flex-direction:column; }
.campo > label{
  font-size:12px;
  color:#3b4a70;
  margin-bottom:6px;
}
.campo input, .campo select, .campo textarea{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
}
.campo.full{ grid-column:1 / -1; }

/* Chips */
.filtros-rapidos{ display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.btn-chip{
  padding:6px 10px;
  border:1px solid var(--line);
  background:#f7f9ff;
  border-radius:999px;
  cursor:pointer;
  font-size:12px;
}
.btn-chip:hover{ background:#eef3ff }

/* ====== Tablas ====== */
.tabla-scroll{ overflow:auto; width:100%; }
table{ width:100%; border-collapse:collapse; background:#fff; }
table thead th{
  text-align:left;
  background:#fafbff;
  color:#3b4a70;
  font-weight:700;
  border-bottom:1px solid var(--line);
  padding:10px 8px;
  white-space:nowrap;
}
table tbody td{
  border-bottom:1px solid var(--line);
  padding:4px 8px;
  font-size:14px;
  vertical-align: middle;
}
table tbody tr:hover{ background:#f9fbff; }

#tablaPartes td:nth-child(5){
  max-width:280px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.estado-select{
	border-radius: 10px;
    padding: 5px 5px;
    text-align: center;
}

.tabla-admin .badge{ padding:2px 6px; border-radius:6px; font-size:.85rem }
.badge-pendiente{ background:#f0f0f0 }
.badge-procesada{ background:#d7f9dc }
.badge-lista{ background:#fff3cd }
#admTbody td.km-cell{ font-weight:700; color:#1565c0; }
#admTbody th{ background:#fafbff; white-space:nowrap }

/* ====== Paginación ====== */
.paginacion{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top:14px;
}
.paginacion button{
  padding:6px 10px;
  border:1px solid var(--line);
  background:#eef3ff;
  color:var(--brand);
  border-radius:10px;
  cursor:pointer;
}
.paginacion button:hover{ background:#e4ecff }
.paginacion button:disabled{
  background:var(--brand);
  color:#fff;
}

/* ====== Icon buttons ====== */
.icon-btn, .icon-link, .btn-ver-imagenes{
  width:28px; height:28px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:8px;
  background:#023277; color:#fff;
  border:none; cursor:pointer; text-decoration:none;
}
.icon-btn:hover,.icon-link:hover,.btn-ver-imagenes:hover{ background:#155bbd }
.icon-btn{ position:relative }
.icon-btn.has-images::after{
  content:''; position:absolute; top:3px; right:3px; width:8px; height:8px;
  background:#e53935; border-radius:50%;
}
.icon-btn.has-dot::after{
  content:''; position:absolute; top:-2px; right:-2px; width:8px; height:8px;
  background:#e53935; border-radius:50%;
}

/* ====== Badges ====== */
.estado-badge{
  display:inline-block; padding:4px 8px; border-radius:8px; font-weight:600; line-height:1; color:#1d1d1d;
}
.estado-pendiente{ background:#e9ecef }
.estado-procesada{ background:#c8f7c5 }
.estado-lista_facturar{ background:#fff3b0 }

/* ====== Modal ====== */
.modal-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.45); display:none; align-items:center; justify-content:center; z-index:9999 }
.modal{
  background:#fff; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.25);
  width:95%; max-width:820px; padding:18px;
}
.modal h3{ margin:0 0 10px }
.modal footer{ display:flex; gap:10px; justify-content:flex-end; margin-top:12px }
.mat-row{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr auto; gap:8px; margin-bottom:8px }
.mat-row input, .mat-row select{ width:100% }
@media (max-width:680px){
  .mat-row{ grid-template-columns:1fr 1fr; grid-auto-rows:auto }
  .mat-row .full{ grid-column:1 / -1 }
}

/* ====== Responsive tweaks ====== */
@media (max-width: 900px){
  .session-info{ position:static; margin:4px 0 10px auto }
}

/* KM LEDN */
.km-ledn {
  font-weight: 700;
  color: #b1003a;
  background: #ffe8ef;
  padding: 2px 6px;
  border-radius: 6px;
  display: inline-block;
}

/* ====== Analytics ====== */
.anl { margin-bottom: 16px; }
.anl-toggle{
  width:100%; display:flex; align-items:center; gap:10px;
  background:#0a2540; color:#fff; border:none; border-radius:10px;
  padding:12px 14px; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.08);
}
.anl-toggle .anl-title{ font-weight:700; }
.anl-toggle .anl-badge{
  margin-left:auto; background:#fff; color:#0a2540; font-weight:600;
  padding:2px 8px; border-radius:999px; font-size:12px;
}
.anl-toggle .anl-caret{ transition:transform .2s ease; }
.anl-toggle[aria-expanded="true"] .anl-caret{ transform:rotate(180deg); }

.anl-panel{
  background:#fff; border:1px solid #e8eef3; border-radius:10px;
  padding:16px; margin-top:8px;
}
.anl-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:12px; margin-bottom:12px;
}
.anl-card{
  border:1px solid #e8eef3; border-radius:12px; padding:12px;
  background:#f9fbfd;
}
.anl-label{ font-size:12px; color:#607d8b; margin-bottom:6px; }
.anl-value{ font-size:22px; font-weight:800; color:#0a2540; }

.anl-subs{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:12px; margin-top:8px;
}
.anl-sub{ border:1px dashed #e0e7ef; border-radius:10px; padding:10px; }
.anl-sub-title{ font-weight:700; color:#0a2540; margin-bottom:8px; }
.anl-list{ list-style:none; margin:0; padding:0; }
.anl-list li{ display:flex; justify-content:space-between; padding:6px 4px; }
.anl-list li + li{ border-top:1px dashed #edf2f7; }

/* ====== LOGIN ====== */
.auth-wrap{
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 22px;
  background: var(--bg);
}
.login-card{
  width: 100%;
  max-width: 440px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px 20px;
}
.brand{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 6px;
}
.brand img{
  width: 46px; height: 46px; border-radius: 10px; object-fit: contain;
  background: #fff;
  border: 1px solid var(--line);
  padding: 6px;
}
.brand h1{
  margin: 0;
  font-size: 18px;
  color: var(--text);
  line-height: 1.2;
}
.login-subtitle{
  text-align: center;
  margin: 6px 0 16px 0;
  color: var(--muted);
  font-size: 13px;
}
.input-wrap{
  position: relative;
  display: flex;
  align-items: center;
}
.input-wrap input{
  width: 100%;
  padding-right: 42px;
}
.toggle-pass{
  position: absolute;
  right: 8px; top: 50%; transform: translateY(-50%);
  border: 1px solid var(--line);
  background: #f7f9ff;
  border-radius: 8px;
  font-size: 12px;
  padding: 6px 8px;
  cursor: pointer;
  color: var(--brand);
}
.actions{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
}
.error-box{
  display: none;
  margin: 10px 0 0 0;
  padding: 10px 12px;
  border: 1px solid #ffd3d3;
  background: #fff1f1;
  color: #b00020;
  border-radius: 10px;
  font-size: 13px;
}
.footer-note{
  text-align:center; margin-top:16px; color:var(--muted); font-size:12px;
}

/* ====== Dark Mode ====== */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#0f172a;
    --card:#1e293b;
    --line:#334155;
    --text:#f1f5f9;
    --muted:#94a3b8;
    --brand:#3b82f6;
    --brand-2:#2563eb;
    --danger:#ef4444;
    --ok:#22c55e;
  }

  body {
    background: var(--bg);
    color: var(--text);
  }

  /* (sin .container aquí para evitar segundas definiciones) */
  .login-card,
  table,
  .modal,
  .anl-panel,
  .anl-card,
  .anl-sub {
    background: var(--card);
    border-color: var(--line);
    color: var(--text);
  }

  .campo input,
  .campo select,
  .campo textarea {
    background: #0f172a;
    color: var(--text);
    border-color: var(--line);
  }

  .error-box {
    background:#3f1d1d;
    border-color:#7f1d1d;
    color:#fca5a5;
  }
  
  .mat-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr auto;
    gap: 8px;
    margin-bottom: 8px;
    background: #030425;
    padding: 10px;
    gap: 1px;
    border-radius: 10px;
}
.picker-menu {
        background: #131935 !important;
   }	
}

.ex_costo {
    border-radius: 0px 10px 10px 0px;
}
.ex_desc{
	border-radius:	10px 0px 0px 10px;
}


/* Oculto SIEMPRE el toggle en desktop (¡a prueba de overrides!) */
.actions-toggle { display:none !important; }

/* Mobile: muestro el toggle y oculto la botonera hasta abrir la hoja */
@media (max-width: 700px){
  .actions-wrap .actions-toggle { display:inline-flex !important; }
  .botonera-principal { display:none !important; }
  .actions-wrap.actions-open .botonera-principal { display:flex !important; }
}

/* ===== Fix columna FECHA (admin + panel) ===== */
/* Evita quiebres y fuerza un ancho mínimo suficiente para DD-MM-AAAA */
.tabla-admin th:nth-child(2),
.tabla-admin td:nth-child(2),
#tablaPartes th:nth-child(2),
#tablaPartes td:nth-child(2) {
  white-space: nowrap;
  word-break: keep-all;        /* no cortar en guiones */
  width: 100px;
  min-width: 100px;
}

/* ===== Mejora de contraste en MODO OSCURO ===== */
@media (prefers-color-scheme: dark) {

  /* Encabezado de tabla */
  table thead th{
    background:#0b1220;           /* más oscuro que el body */
    color:var(--text);
    border-color:var(--line);
  }

  /* Celdas y filas */
  table tbody td{ color:var(--text); }
  table tbody tr:hover{ background:#0f1c2d; }   /* sin “blanqueo” al pasar el mouse */
  table tbody tr:nth-child(odd){ background:rgba(255,255,255,.03); } /* cebra leve */
  table tbody tr:nth-child(even){ background:transparent; }

  /* Barras de “Resumen y estadísticas” */
  .anl-card, .anl-sub, .anl-panel{ background:var(--card); border-color:var(--line); }
  .anl-bars .lbl{ color:var(--muted); }
  .anl-bars .bar{ background:#1f2937; }
  .anl-bars .fill{ background:var(--brand); }

  /* Botones icono (PDF, imágenes, extras) */
  .icon-btn, .icon-link, .btn-ver-imagenes{ background:#000000; }
  .icon-btn:hover, .icon-link:hover, .btn-ver-imagenes:hover{ background:#1d4ed8; }

#frmAbrir{
		background: #ffffff;
    padding: 2px 6px;
    border-radius: 6px;
}

}


/* ============================================================
   ADMIN – Estado de filas + labels y KM (solo modo oscuro)
   ============================================================ */
@media (prefers-color-scheme: dark) {
  /* Evitar que zebra/hover tapen el color de estado */
  #admTbody tr[class*="estado-"],
  #admTbody tr[class*="st-"],
  #admTbody tr[class*="row-"],
  #admTbody tr[data-estado]{
    background: initial !important;
  }

  /* PENDIENTE (ROJO) */
  #admTbody tr.estado-pendiente,
  #admTbody tr.st-pendiente,
  #admTbody tr.row-pendiente,
  #admTbody tr[data-estado="pendiente"]{
    background: #7d2d2d !important;  
    border-left: 3px solid #ff0600 !important;
  }
  #admTbody tr.estado-pendiente:hover,
  #admTbody tr.st-pendiente:hover,
  #admTbody tr.row-pendiente:hover,
  #admTbody tr[data-estado="pendiente"]:hover{
    background: #7d2d2dab !important;
  }

  /* LISTA PARA FACTURAR (AMARILLO) */
  #admTbody tr.estado-lista_facturar,
  #admTbody tr.st-lista_facturar,
  #admTbody tr.row-lista_facturar,
  #admTbody tr[data-estado="lista_facturar"]{
    background: #c1b03e !important;  
    border-left: 3px solid #f59e0b !important;
  }
  #admTbody tr.estado-lista_facturar:hover,
  #admTbody tr.st-lista_facturar:hover,
  #admTbody tr.row-lista_facturar:hover,
  #admTbody tr[data-estado="lista_facturar"]:hover{
    background: rgba(245, 158, 11, .22) !important;
  }

  /* PROCESADA (VERDE) */
  #admTbody tr.estado-procesada,
  #admTbody tr.st-procesada,
  #admTbody tr.row-procesada,
  #admTbody tr[data-estado="procesada"]{
    background: #17bb5f !important;  
    border-left: 3px solid #1ad700 !important;
  }
  #admTbody tr.estado-procesada:hover,
  #admTbody tr.st-procesada:hover,
  #admTbody tr.row-procesada:hover,
  #admTbody tr[data-estado="procesada"]:hover{
    background: rgba(34, 197, 94, .22) !important;
  }

  /* Labels y pequeños indicadores (más claros en dark) */
  label,
  .lbl,
  .badge,
  .tag,
  .estado-chip {
    color: #e5e7eb !important;  /* slate-200 */
  }

  /* KM: resaltar en modo oscuro (y el caso especial .km-ledn) */
  /* Si tu tabla mantiene el orden de columnas, KM es la 9ª */
  #admTbody td:nth-child(9),
  #admTbody .km-ledn {
    color: #f2ff00 !important;  /* casi blanco */
    font-weight: 600;
  }
}

/* (Opcional pero recomendable) evita que la FECHA se parta en 3 líneas */
#admTbody td:nth-child(2) {
  white-space: nowrap;
  width: 110px;        /* ajustá si te queda muy justo */
}

@media (prefers-color-scheme: dark) {
   .anl-label,
  #admAnalytics .anl-label {
    color: #cbd5e1 !important;   /* slate-300 */
  }

  /* Valor destacado (casi blanco y con énfasis) */
  .anl-value,
  #admAnalytics .anl-value {
    color: #f3f4f6 !important;   /* slate-100 */
    font-weight: 600;
  }

  /* Si dentro hay links, que hereden el color claro */
  .anl-label a,
  .anl-value a {
    color: inherit !important;
  }

  /* (Opcional) aclarar iconos dentro de analytics */
  .anl-label i, .anl-value i,
  .anl-label svg, .anl-value svg {
    color: inherit !important;
    fill: currentColor !important;
  }
  .anl-card, .anl-item, .analytics-card {
    background: #0b1220;         /* azul petróleo muy oscuro */
    border-color: #1f2a44;
  }
  .anl-sub-title,
  #admAnalytics .anl-sub-title {
    color: #ffffff !important;   /* blanco pleno */
    font-weight: 600;
  }
  .btn-secundario{
  background: #000000 !important;
  color: #ffffff !important;
  border: 1px solid #000000 !important;
}
.btn-secundario:hover { background: #111111 !important; }
.btn-secundario:disabled { opacity: .6; cursor: not-allowed; }

/* Chip: fondo #050f2d (azul petróleo muy oscuro) */
.btn-chip,
.chip,
.tab {
  background: #050f2d !important;
  color: #e5e7eb !important;            /* slate-200 para buen contraste */
  border: 1px solid transparent !important;
}
.tab.active {
  background: #024fed !important;
  color: #e5e7eb !important;            /* slate-200 para buen contraste */
  border: 1px solid transparent !important;
}
.card {
background: #161616 !important;
 }
.btn-chip:hover { background: #0a1a4a !important; }
.btn-chip:disabled { opacity: .6; cursor: not-allowed; }

/* Por si los chips incluyen enlaces/íconos */
.btn-chip a { color: inherit !important; }
.btn-chip i, .btn-chip svg { color: inherit !important; fill: currentColor !important; }

span.km-ledn{
	background: #ad1f1f !important;
}

.anl-bars strong{
	color: #ffffff !important;
}
.btn-log{
	background: #000000;
	color: #ffffff;
}
.btn-log:hover{
	background: #2a4ea3;
}
.log-inline-box {
    padding: 12px 14px;
    background: #000000 !important;
}
.log-inline-text {
    color: #ffffff !important;
}

pre{
    background: #030c27 !important;
    border: 1px solid #ff0000 !important;
}	
}

@media (prefers-color-scheme: dark) {
	.muted{
		color: #ffffff !important;
	}
	code{
	 background: #651c1c !important;
    padding: 2px 6px;
    border-radius: 6px;
}

.small.muted.note {
    background: #250707;
    border: 1px dashed #d0d7e2;
    padding: 8px;
    border-radius: 8px;
}
.session-info{
	color: #00aaff;
	background: #000000;
}
}

/* ---- Bitácora de Partes (Admin) ---- */
.parte-log-box{
  border:1px solid #e7ecff;
  border-radius:12px;
  padding:10px;
  background:#fff;
  margin-top:10px;
}
.parte-log-header{
  display:flex; align-items:center; justify-content:space-between;
  font-weight:700; color:#0b56f1; margin-bottom:6px;
}
.parte-log-actions .btn{ padding:6px 10px; font-size:12px; border-radius:8px }
.parte-log-list{ list-style:none; padding:0; margin:0 }
.parte-log-item{
  display:flex; flex-direction:column; gap:4px;
  padding:8px 0; border-top:1px dashed #e7ecff;
}
.parte-log-item:first-child{ border-top:0 }
.parte-log-item .log-text{ color:#1f2937 }
.parte-log-item .log-date{ color:#6b7a9a; font-size:12px }
.log-json summary{ cursor:pointer; color:#0b56f1; margin-top:2px }
.log-json pre{
  background:#f7f9ff; border:1px solid #e7ecff; border-radius:8px;
  padding:8px; margin:6px 0 0 0; max-height:220px; overflow:auto;
  font-size:12px; line-height:1.4;
}


/* ===== Log inline en Administración ===== */
.log-inline-row td{
  padding:0 !important;
  background:#fff;
  border-top:1px solid #e7ecff;
  border-bottom:1px solid #e7ecff;
}
.log-inline-box{
  padding:12px 14px;
  background:#fff;
}
.log-inline-head{
  display:flex; align-items:center; justify-content:space-between;
  font-weight:700; color:#0b56f1; margin-bottom:8px;
}
.log-inline-actions .btn{ padding:6px 10px; font-size:12px; border-radius:8px }
.log-inline-body{ display:block }
.log-inline-item{
  padding:8px 0; border-top:1px dashed #e7ecff;
}
.log-inline-item:first-child{ border-top:0 }
.log-inline-line{
  display:flex; gap:8px; align-items:flex-start; justify-content:space-between;
}
.log-inline-text{ color:#1f2937 }
.log-inline-date{ color:#6b7a9a; font-size:12px; white-space:nowrap }
.log-json summary{ cursor:pointer; color:#0b56f1; margin-top:4px }
.log-json pre{
  background:#f7f9ff; border:1px solid #e7ecff; border-radius:8px;
  padding:8px; margin:6px 0 0 0; max-height:220px; overflow:auto;
  font-size:12px; line-height:1.4;
}

/* Dark mode si usás crm.css y data-theme=dark */
html[data-theme="dark"] .log-inline-row td{ background:#121a2b; border-color:#26334d }
html[data-theme="dark"] .log-inline-box{ background:#121a2b }
html[data-theme="dark"] .log-inline-text{ color:#f2f4f8 }
html[data-theme="dark"] .log-json pre{ background:#16233d; border-color:#2a3b5f }

/* ===== Toolbar sticky + hoja móvil pulida ===== */
.actions-wrap{
  position: sticky; top: 0; z-index: 6;
  display: flex; align-items: center; gap: 10px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px; margin-bottom: 12px;
}
.actions-toggle{ display:none !important; } /* desktop por defecto */

.actions-backdrop{
  display:none; position: fixed; inset:0;
  background: rgba(0,0,0,.45);
  z-index: 5;
}

/* Mobile: usamos “hoja” inferior */
@media (max-width: 700px){
  .actions-wrap .actions-toggle{ display:inline-flex !important; }
  .botonera-principal{
    display:none !important;
    position: fixed; left:0; right:0; bottom:0;
    background: var(--card);
    border-top: 1px solid var(--line);
    border-radius: 16px 16px 0 0;
    padding: 14px 12px;
    gap: 10px; flex-wrap: wrap;
    box-shadow: 0 -10px 30px rgba(0,0,0,.20);
    z-index: 6;
  }
  .actions-wrap.actions-open .botonera-principal{ display:flex !important; }
  .actions-wrap.actions-open .actions-backdrop{ display:block; }
  .botonera-principal .btn-secundario{ flex: 1 1 calc(50% - 10px); justify-content: center; }
}

/* Desktop: distribución elegante */
@media (min-width: 701px){
  .botonera-principal{
    display:flex; flex-wrap:wrap; gap:10px;
  }
  .botonera-principal .btn-secundario{
    background:#eef3ff; color:var(--brand);
  }
}

/* Dark mode coherente (usa tus variables ya definidas) */
@media (prefers-color-scheme: dark){
  .actions-wrap{ background: var(--card); border-color: var(--line); }
  .botonera-principal{ background: var(--card); border-color: var(--line); }
}

/* ===== Toolbar sticky + hoja móvil (comparten look con el Panel) ===== */
.actions-wrap{
  position: sticky; top: 0; z-index: 6;
  display: flex; align-items: center; gap: 10px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px; margin-bottom: 12px;
}
.actions-toggle{ display:none !important; } /* desktop por defecto */

.actions-backdrop{
  display:none; position: fixed; inset:0;
  background: rgba(0,0,0,.45);
  z-index: 5;
}

/* Mobile: hoja inferior */
@media (max-width: 700px){
  .actions-wrap .actions-toggle{ display:inline-flex !important; }
  .botonera-principal{
    display:none !important;
    position: fixed; left:0; right:0; bottom:0;
    background: var(--card);
    border-top: 1px solid var(--line);
    border-radius: 16px 16px 0 0;
    padding: 14px 12px;
    gap: 10px; flex-wrap: wrap;
    box-shadow: 0 -10px 30px rgba(0,0,0,.20);
    z-index: 6;
  }
  .actions-wrap.actions-open .botonera-principal{ display:flex !important; }
  .actions-wrap.actions-open .actions-backdrop{ display:block; }
  .botonera-principal .btn-secundario{ flex: 1 1 calc(50% - 10px); justify-content: center; }
}

/* Desktop: distribución */
@media (min-width: 701px){
  .botonera-principal{
    display:flex; flex-wrap:wrap; gap:10px;
  }
}

/* Dark mode coherente */
@media (prefers-color-scheme: dark){
  .actions-wrap{ background: var(--card); border-color: var(--line); }
  .botonera-principal{ background: var(--card); border-color: var(--line); }
}


/* ============================================================
   LOGIN – Fondo animado + tarjeta translúcida (glassmorphism)
   ============================================================ */

/* Contenedor*/
.auth-wrap{
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  padding: 22px;
  background: transparent !important; /* anulamos color anterior */
  isolation: isolate; /* asegura z-index correcto */
}

/* Capa 1: imagen de fondo con paneo suave */
.auth-wrap::before{
  content:"";
  position: absolute;
  inset: -2% -10%;         /* margen extra para evitar ver bordes en el paneo */
  z-index: -2;
  background-image: url("/static/images/back-login1.jpg");
  background-size: auto;
  background-repeat: no-repeat;
  background-position: 0% 50%;
  filter: brightness(.75) saturate(1.12);
  animation: back-pan 42s ease-in-out infinite alternate;
  will-change: background-position, transform;
}

/* Capa 2: gradiente/viñeta para mejorar contraste del contenido */
.auth-wrap::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(1200px 600px at 80% 20%, rgba(0,0,0,.18), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.25));
  pointer-events:none;
}

/* Animación del paneo (de izquierda a derecha) */
@keyframes back-pan{
  0%   { background-position: 0% 50%;   transform: scale(1.06); }
  100% { background-position: 100% 50%; transform: scale(1.06); }
}

/* Tarjeta: efecto vidrio con blur y bordes sutiles */
.login-card{
  backdrop-filter: blur(10px) saturate(1.12);
  -webkit-backdrop-filter: blur(10px) saturate(1.12);
  background: rgba(255,255,255,.65) !important;
  border: 1px solid rgba(255,255,255,.38) !important;
  box-shadow:
    0 10px 22px rgba(0,0,0,.12),
    0 2px 8px rgba(0,0,0,.08);
}

/* Inputs y toggle dentro del glass (ligero contraste) */
.input-wrap input{
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(255,255,255,.55);
}
.toggle-pass{
  background: rgba(255,255,255,.8);
  border: 1px solid rgba(255,255,255,.6);
}

/* El mensaje de error se adapta a fondo translúcido */
.error-box{
  background: rgba(255, 17, 17, .10);
  border: 1px solid rgba(255, 90, 90, .45);
}

/* Botón primario resalta sobre el glass */
.btn-primario{
  background: var(--brand);
  color: #fff;
  border: 0;
}
.btn-primario:hover{ background: var(--brand-2); }

/* ----------------- MODO OSCURO ----------------- */
@media (prefers-color-scheme: dark){
   .auth-wrap::after{
    background:
      radial-gradient(1200px 600px at 70% 15%, rgba(0,0,0,.45), transparent 60%),
      linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.65));
  }
  .login-card{
    background: rgba(2, 6, 23, .55) !important;     /* slate-950 translúcido */
    border: 1px solid rgba(148,163,184,.25) !important; /* slate-400/25 */
    color: var(--text);
  }
  .input-wrap input{
    background: rgba(2, 6, 23, .55);
    border-color: rgba(148,163,184,.25);
    color: var(--text);
  }
  .toggle-pass{
    background: rgba(2, 6, 23, .6);
    border-color: rgba(148,163,184,.28);
    color: var(--text);
  }
  .error-box{
    background: rgba(239,68,68,.12);
    border-color: rgba(239,68,68,.4);
    color: #fecaca; /* rojo claro */
  }
}

/* ----------------- ACCESIBILIDAD -----------------
   Si el usuario prefiere reducir movimiento, desactivamos la animación.
--------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .auth-wrap::before{ animation: none !important; }
}


/* ===== Donut Servicios ===== */
.chart-wrap{ position:relative; width:100%; max-width:680px; margin:8px auto 6px auto; }
.anl-legend{ list-style:none; padding:0; margin:8px 0 0 0; display:flex; flex-direction:column; gap:6px; }
.anl-legend li{ display:flex; align-items:center; gap:8px; }
.anl-legend .sw{ width:12px; height:12px; border-radius:3px; display:inline-block; }
.anl-legend .lbl{ flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.anl-legend .val{ font-weight:700; }


/* ======= Collapsible / Accordion ======= */
.collapsible { border-radius: 14px; overflow: hidden; }
.collapsible-header{
  width:100%; display:flex; align-items:center; gap:10px;
  background:var(--card-bg,#fff); border:1px solid rgba(0,0,0,.06);
  padding:12px 14px; cursor:pointer; text-align:left;
}
.collapsible-header .title{ font-weight:700; }
.collapsible-header .spacer{ flex:1; }
.collapsible-header .hint{ font-size:12px; opacity:.7; }
.collapsible-header .chev{
  width:10px; height:10px; border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform: rotate(-45deg); transition: transform .2s ease;
  opacity:.7; margin-left:4px;
}
.collapsible[data-open="true"] .chev{ transform: rotate(45deg); }
.collapsible-body{
  max-height:0; overflow:hidden; transition:max-height .25s ease;
  border-left:1px solid rgba(0,0,0,.06);
  border-right:1px solid rgba(0,0,0,.06);
  border-bottom:1px solid rgba(0,0,0,.06);
  background: #ffffff00;
}
/* cuando abre, suficiente alto para mapas + controles */
.collapsible[data-open="true"] .collapsible-body{ 
max-height: 1200px;
border-radius: 10px;
border-color: var(--line);
 }


/* Dark mode coherente con tus analíticas */
@media (prefers-color-scheme: dark){
  .anl-legend .lbl{ color:#cbd5e1; }  /* slate-300 */
  .anl-legend .val{ color:#f3f4f6; }  /* slate-100 */
  .collapsible-header .title {
    color: #fff;}
  .collapsible-header {
        background: #0a2540;}
	.maps-grid{
		background: var(--card);}	
	.map-header-inline{
	background: #1e293b;}
}

/* ======= Mapas ======= */
.map-header-inline{ border:none; box-shadow:none; margin:0; padding:12px 12px 0 12px; }
.map-actions{ display:flex; align-items:center; gap:8px; }
.maps-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; padding:12px; }
.map-box{
  border:1px solid rgba(0,0,0,.06); border-radius:14px; padding:10px;
  box-shadow:0 2px 8px rgba(0,0,0,.05);
}
#mapFecha {
    padding: 8px;
    border-radius: 10px;
}
#bsasmap.map-box{
background: #0f6aff;}
#neuquenmap.map-box{
background: #ff0f0fd4;}
.map-title{ font-weight:600; margin:6px 0 10px; }
.map{ width:100%; height:340px; border-radius:12px; overflow:hidden; }
.leaflet-container{ min-height:300px; } /* evita altura 0 si hay layouts grid */

@media (max-width:900px){
  .maps-grid{ grid-template-columns:1fr; }
  .map{ height:300px; }
}

/* Pin SVG (si usás el divIcon que te pasé) */
.leaf-pin{ width:28px; height:28px; transform:translate(-14px,-28px); }
.leaf-pin svg{ display:block; }
.leaf-pin .pin{ filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }


/* ===== Dark mode para modales de Edición y Firmas ===== */
@media (prefers-color-scheme: dark) {
  .modal,
  .firma-modal,
  .editar-modal {
    background: rgba(10,10,10,0.65);
    backdrop-filter: blur(4px);
  }
  .modal .modal-content,
  .firma-modal .modal-content,
  .editar-modal .modal-content {
    background: #121212;
    color: #f0f0f0;
    border: 1px solid #2a2a2a;
  }
  .modal .modal-header,
  .firma-modal .modal-header,
  .editar-modal .modal-header {
    border-bottom: 1px solid #2a2a2a;
  }
  .modal .modal-footer,
  .firma-modal .modal-footer,
  .editar-modal .modal-footer {
    border-top: 1px solid #2a2a2a;
  }
  .modal input[type="text"],
  .modal input[type="email"],
  .modal input[type="date"],
  .modal textarea,
  .firma-modal input[type="text"],
  .firma-modal textarea,
  .editar-modal input[type="text"],
  .editar-modal textarea {
    background: #1a1a1a;
    color: #f5f5f5;
    border: 1px solid #333;
  }
  .modal .btn-primario,
  .firma-modal .btn-primario,
  .editar-modal .btn-primario {
    background: #0b56f1;
    color: #fff;
    border-color: #0b56f1;
  }
  .modal .btn-secundario,
  .firma-modal .btn-secundario,
  .editar-modal .btn-secundario {
    background: #222;
    color: #eee;
    border-color: #333;
  }
}

/* Alternativa manual: si agregás <body class="dark"> */
body.dark .modal,
body.dark .firma-modal,
body.dark .editar-modal { background: rgba(10,10,10,0.65); backdrop-filter: blur(4px); }
body.dark .modal .modal-content,
body.dark .firma-modal .modal-content,
body.dark .editar-modal .modal-content { background:#121212; color:#f0f0f0; border:1px solid #2a2a2a; }
body.dark .modal input[type="text"],
body.dark .modal input[type="email"],
body.dark .modal input[type="date"],
body.dark .modal textarea,
body.dark .firma-modal input[type="text"],
body.dark .firma-modal textarea,
body.dark .editar-modal input[type="text"],
body.dark .editar-modal textarea { background:#1a1a1a; color:#f5f5f5; border:1px solid #333; }

/* ===== Botón de Chat en encabezado ===== */
.btn-chat-header{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  background:#e5f0ff;
  color:var(--brand);
  font-size:0.9rem;
  text-decoration:none;
  border:1px solid var(--line);
  cursor:pointer;
  white-space:nowrap;
}
.btn-chat-header i{
  font-size:0.9rem;
}
.btn-chat-header:hover{
  background:#dbe6ff;
}

/* badge de mensajes no leídos */
.chat-unread-badge{
  min-width:18px;
  padding:1px 6px;
  border-radius:999px;
  background:#ef4444;
  color:#fff;
  font-size:0.7rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* Dark mode coherente */
@media (prefers-color-scheme: dark){
  .btn-chat-header{
    background:#020617;
    border-color:#1e293b;
    color:#e5e7eb;
  }
  .btn-chat-header:hover{
    background:#020617;
    border-color:#334155;
  }
}