* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Segoe UI", Arial, sans-serif;
  background: #f2f5f8;
  color: #18212b;
}

.caja-login {
  max-width: 360px;
  margin: 80px auto;
  padding: 30px;
  background: white;
  border: 1px solid #dfe5ec;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(25, 45, 70, 0.08);
  text-align: center;
}
.caja-login h1 { margin: 0 0 4px; }
.subtitulo { color: #637083; margin: 0 0 24px; font-size: 14px; }

.caja-login form { text-align: left; }
.caja-login label { display: block; margin: 12px 0 4px; font-size: 13px; color: #4d5a6b; }
.caja-login input {
  width: 100%; padding: 10px; border: 1px solid #cfd7e2; border-radius: 8px; font-size: 14px;
}
.caja-login button {
  width: 100%; margin-top: 20px; padding: 10px; border: none; border-radius: 8px;
  background: #155b82; color: white; font-weight: 600; cursor: pointer;
}
.mensaje-error { color: #9d2929; background: #fdeaea; padding: 8px 12px; border-radius: 8px; font-size: 13px; }

.topbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 24px; background: #123854; color: white;
}
.topbar button { background: none; border: 1px solid white; color: white; padding: 6px 12px; border-radius: 6px; cursor: pointer; }
.acciones-topbar { display: flex; align-items: center; gap: 12px; }
.boton-topbar {
  color: white; text-decoration: none; border: 1px solid white; padding: 6px 12px; border-radius: 6px; font-size: 13px;
}
.contenido { max-width: 800px; margin: 30px auto; padding: 0 20px; }
.contenido-angosto { max-width: 480px; }
.contenido-ancha { max-width: 1100px; }
.lista-clientes { list-style: none; padding: 0; }
.lista-clientes li {
  padding: 12px; background: white; border: 1px solid #dfe5ec; border-radius: 8px; margin-bottom: 8px;
  display: flex; justify-content: space-between; align-items: center;
}
.nota { color: #637083; font-size: 13px; margin-top: 24px; }

.fila-titulo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.boton {
  background: #155b82; color: white; padding: 8px 14px; border-radius: 8px;
  text-decoration: none; font-size: 13px; font-weight: 600;
}
.tabla { width: 100%; border-collapse: collapse; background: white; border-radius: 10px; overflow: hidden; }
.tabla th, .tabla td { padding: 10px 12px; border-bottom: 1px solid #dfe5ec; text-align: left; font-size: 13px; }
.tabla th { background: #f7f9fb; color: #4d5a6b; }
.tabla .acciones { display: flex; gap: 10px; align-items: center; }
.tabla .acciones a { color: #155b82; }

.badge { display: inline-block; padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.badge-verde { background: #e7f6ef; color: #0d7147; }
.badge-gris { background: #edf0f4; color: #5f6978; }

.form-inline { display: inline; }
.enlace-boton {
  background: none; border: none; color: #9d2929; cursor: pointer; font-size: 13px; padding: 0; text-decoration: underline;
}

.formulario { display: flex; flex-direction: column; max-width: 420px; }
.formulario label { margin: 12px 0 4px; font-size: 13px; color: #4d5a6b; }
.formulario input, .formulario select {
  padding: 9px; border: 1px solid #cfd7e2; border-radius: 8px; font-size: 14px;
}
.formulario input:disabled { background: #f2f5f8; color: #8b95a3; }
.formulario button {
  margin-top: 18px; padding: 10px; border: none; border-radius: 8px;
  background: #155b82; color: white; font-weight: 600; cursor: pointer; align-self: flex-start; padding-left: 20px; padding-right: 20px;
}
.formulario-en-linea { flex-direction: row; align-items: flex-end; gap: 10px; max-width: none; }
.formulario-en-linea label { margin: 0; }
.formulario-en-linea button { margin-top: 0; }
.ayuda { color: #8b95a3; font-size: 12px; margin: 2px 0 0; }

.kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 13px; margin-bottom: 20px;
}
.kpi {
  background: white; border: 1px solid #dfe5ec; border-radius: 12px;
  padding: 14px 16px; box-shadow: 0 8px 24px rgba(25, 45, 70, 0.06);
}
.kpi .label { color: #637083; font-size: 12px; font-weight: 650; }
.kpi .value { margin-top: 6px; font-size: 26px; font-weight: 750; }
.kpi-verde { color: #0d7147; }
.kpi-amarillo { color: #8d7200; }
.kpi-rojo { color: #9d2929; }

.operativo-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.operativo-card {
  background: white; border: 1px solid #dfe5ec; border-radius: 14px;
  padding: 16px; box-shadow: 0 8px 24px rgba(25, 45, 70, 0.06);
}
.operativo-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.operativo-matriz { color: #637083; font-size: 12px; margin: 0 0 8px; text-transform: capitalize; }
.operativo-detalle { color: #4d5a6b; font-size: 12px; margin: 2px 0; }

.badge-rojo { color: #9d2929; background: #fdeaea; }
.badge-amarillo { color: #8d7200; background: #fff5d9; }



/* ==========================================================
   NUEVOS ESTILOS PARA ESTACIONES (DONA Y DETALLE)
   ========================================================== */

/* Header con conteo y botón */
.seccion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.badge-conteo {
  background: #123854;
  color: #ffffff;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

/* Gráfico Circular (Dona) */
.col-dona {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 12px 0;
}

.dona-wrapper {
  margin-top: 6px;
}

.dona-chart {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: conic-gradient(var(--color-dona) var(--pct-dona), #e2e8f0 0);
}

.dona-center {
  width: 52px;
  height: 52px;
  background: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 13px;
  color: #18212b;
}

/* Transición suave para la tarjeta interactiva */
.card-estacion {
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.card-estacion:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(25, 45, 70, 0.12);
}

/* Panel Desplegable de Detalle */
.panel-detalle {
  border-top: 1px dashed #cfd7e2;
  margin-top: 12px;
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}

.meta-label {
  color: #637083;
  font-size: 11px;
  font-weight: 600;
}

.meta-val {
  color: #18212b;
  font-weight: 500;
}

.font-semibold {
  font-weight: 600;
}



/* ==========================================================
   ESTILOS DASHBOARD AMPLIADO & CONTROLES
   ========================================================== */

/* Header tipo Banner azul oscuro */
.dashboard-header {
  background-color: #0d2840;
  color: #ffffff;
  padding: 24px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dashboard-title {
  font-size: 26px;
  font-weight: 700;
  margin: 0;
}

.dashboard-subtitle {
  font-size: 13px;
  opacity: 0.8;
  margin-top: 4px;
}

.box-actualizacion {
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 8px 16px;
  text-align: right;
  background: rgba(255, 255, 255, 0.05);
}

.box-actualizacion .lbl {
  font-size: 10px;
  letter-spacing: 0.5px;
  opacity: 0.7;
}

.box-actualizacion .val {
  font-size: 14px;
  font-weight: 700;
}

/* Filas de Filtros y Leyendas */
.card-panel-control {
  background: #ffffff;
  border-radius: 12px;
  padding: 14px 20px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Titulo centrado de la fila "Actual/Historico/Matriz" de monitoreo/estaciones.ejs
   (antes vivia como position:absolute inline en la vista). Al no formar parte
   del flujo normal, en pantallas angostas queda flotando encima de los botones
   de al lado en vez de bajar de linea con ellos -- ver el reset en el media
   query de mas abajo. */
.card-panel-titulo-centro {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}

/* Contenedor de contenido debajo de .dashboard-header (Monitoreo/Inventario
   de estaciones, historico, matriz diaria): antes vivia como padding inline
   en cada vista; se centraliza aca para poder reducirlo en movil. */
.dashboard-contenido { padding: 24px 32px; }

.btn-actual {
  background: #0d2840;
  color: #ffffff;
  font-weight: 700;
  font-size: 13px;
  padding: 8px 20px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
}

.select-matriz {
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid #d0d7de;
  font-weight: 600;
  color: #0d2840;
  outline: none;
  background-color: #f8fafc;
}

.pill-leyenda {
  background: #f1f5f9;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 8px;
}

.dot-leyenda {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

/* Grilla Ampliada de Tarjetas (Imagen 3) */
.grid-tarjetas-ampliada {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  margin-top: 20px;
}

.card-estacion-ampliada {
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  padding: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
  transition: transform 0.15s ease;
}

.card-estacion-ampliada:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

.head-tarjeta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.badge-actual-sm {
  background: #e6f4ea;
  color: #137333;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 12px;
}

/* Indicadores Superiores Transmisión / Operatividad */
.grid-status-boxes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
}

.box-status {
  padding: 8px;
  border-radius: 10px;
  text-align: center;
}

.box-status.status-ok {
  background: #e6f4ea;
  color: #137333;
  border: 1px solid #ceead6;
}

.box-status.status-err {
  background: #fce8e6;
  color: #c5221f;
  border: 1px solid #fad2cf;
}

/* Agrega esta clase en tu estilos.css */
.box-status.status-warn {
  background: #fffbe6;
  color: #b7791f;
  border: 1px solid #ffe58f;
}

.lbl-status {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  opacity: 0.8;
}

.val-status {
  font-size: 13px;
  font-weight: 800;
}

/* Cuerpo Interno de Tarjeta en 2 Columnas */
.body-dos-columnas {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 12px;
  align-items: center;
}

.box-dona-seccion {
  text-align: center;
}

.box-metricas-seccion {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.sub-box-metric {
  background: #f8fafc;
  border: 1px solid #edf2f7;
  border-radius: 8px;
  padding: 6px 10px;
  overflow: hidden; /* <--- Evita salidas del borde */
}

.sub-box-metric .m-lbl {
  font-size: 9px;
  font-weight: 700;
  color: #64748b;
  display: block;
}

.sub-box-metric .m-val {
  font-size: 11px;
  font-weight: 700;
  color: #0f172a;
  display: block;
  
  /* REGLAS PARA QUITAR EL DESBORDAMIENTO: */
  word-break: break-word;        /* Rompe palabras o slugs largos si no caben */
  overflow-wrap: anywhere;       /* Rompe en cualquier carácter si es estrictamente necesario */
  line-height: 1.35;             /* Mejora la legibilidad en multi-línea */
}

/* ==========================================================
   RESPONSIVE: login, topbar, tabla de clientes, formularios.
   (estaciones.ejs ya funcionaba bien en móvil porque su grid
   usa auto-fit/minmax, que se acomoda solo -- estas reglas son
   para las páginas que todavía no se ajustaban: login, dashboard,
   y el CRUD de clientes.)

   IMPORTANTE: esto solo funciona si la página tiene en el <head>:
   <meta name="viewport" content="width=device-width, initial-scale=1">
   Sin esa etiqueta, el celular ignora estas reglas y renderiza la
   página como si fuera de escritorio, aunque el CSS esté bien.
   ========================================================== */

/* La tabla de clientes tiene 7 columnas -- no hay forma de que
   quepan en una pantalla angosta sin volverse ilegibles, así que
   en vez de forzarlo se deja scrollear horizontal dentro de su
   propio contenedor (ver .tabla-wrapper en lista.ejs). */
.tabla-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 10px;
}
.tabla-wrapper .tabla { min-width: 720px; }

@media (max-width: 640px) {
  /* Topbar: si el texto + botones no caben en una fila, que bajen
     a la siguiente en vez de desbordar la pantalla. */
  .topbar {
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 16px;
  }
  .acciones-topbar { flex-wrap: wrap; gap: 8px; }

  .contenido { margin: 18px auto; padding: 0 14px; }

  .fila-titulo { flex-direction: column; align-items: flex-start; gap: 10px; }

  /* Login: menos aire arriba y menos padding lateral en pantallas
     chicas, para que no quede descentrado ni pegado a los bordes. */
  .caja-login {
    margin: 32px 16px;
    padding: 22px;
    max-width: none;
  }

  /* Formularios en línea (ej: "Dar acceso a:" + select + botón en
     editar.ejs) se apilan en vez de quedar apretados en una fila. */
  .formulario-en-linea {
    flex-direction: column;
    align-items: stretch;
  }
  .formulario-en-linea select { width: 100%; }
  .formulario-en-linea button { align-self: flex-start; }

  .kpis { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }

  /* Cabecera de Monitoreo/Inventario de estaciones, historico y matriz
     diaria (dashboard-header + card-panel-control): sin flex-wrap se
     apretaban titulo, caja de "ultima actualizacion" y botones en una sola
     fila, superpuestos, en vez de bajar de linea. */
  .dashboard-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 16px;
  }
  .dashboard-header > div:last-child { width: 100%; }
  .dashboard-title { font-size: 19px; }
  .box-actualizacion { text-align: left; }

  .dashboard-contenido { padding: 16px 14px; }

  .card-panel-control {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
  }
  .card-panel-control > div { width: 100%; }
  /* El titulo centrado (posicionado aparte del flujo) se vuelve un renglon
     mas de la columna, como cualquier otro hijo. */
  .card-panel-titulo-centro {
    position: static;
    left: auto;
    transform: none;
    text-align: left;
  }
}



/* ==========================================================
   ESTILOS LOGIN CON FONDO Y RESPONSIVE EN MÓVIL
   ========================================================== */

/* 1. Contenedor principal centrado */
body.body-login {
  min-height: 100vh;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background-color: #0f172a; /* Fondo oscuro de respaldo */
}

/* 2. Capa de fondo para ESCRITORIO (pantallas grandes) */
body.body-login::before {
  content: "";
  position: absolute;
  top: -20px;
  left: -187px;
  right: -20px;
  bottom: -20px;
  
  /* URL DE ESCRITORIO + Capa oscura (overlay) */
  background: 
    linear-gradient(rgba(15, 23, 42, 0.55), rgba(15, 23, 42, 0.55)),
    url('https://www.greengroup.com.pe/wp-content/uploads/2026/02/1.png') no-repeat center center;
  background-size: cover;
  
  filter: blur(0px); /* Desenfoque para escritorio */
  transform: scale(1.03);
  z-index: 1;
}

/* 3. Estilo de la tarjeta de login */
body.body-login .caja-login {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 380px;
  margin: 20px;
  padding: 36px 30px;
  background: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
  text-align: center;
}

body.body-login .caja-login h1 {
  color: #0f172a;
  font-size: 26px;
  font-weight: 700;
  margin: 0 0 6px;
}

body.body-login .caja-login .subtitulo {
  color: #64748b;
  font-size: 14px;
  margin-bottom: 24px;
}


/* ==========================================================
   CAMBIO DE FONDO PARA DISPOSITIVOS MÓVILES (<= 640px)
   ========================================================== */
@media (max-width: 640px) {
  body.body-login::before {
    /* URL DE LA IMAGEN DE MÓVIL */
    background: 
      linear-gradient(rgba(15, 23, 42, 0.60), rgba(15, 23, 42, 0.60)),
      url('https://www.greengroup.com.pe/wp-content/uploads/2026/06/FOTO-DE-EMISIONES-08-scaled.png') no-repeat center center;
    background-size: cover;
    
    /* Puedes ajustar o reducir el blur en móvil si la imagen vertical se ve bien */
    filter: blur(0px);
  }

  body.body-login .caja-login {
    margin: 16px;
    padding: 28px 20px;
  }
}




/* ==========================================================
   ESTILOS VENTANA MODAL DE HISTORIAL
   ========================================================== */
   .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(13, 40, 64, 0.65);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
  }
  
  .modal-container {
    background: #ffffff;
    width: 92%;
    max-width: 1100px;
    max-height: 85vh;
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: modalEntrada 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  }
  
  @keyframes modalEntrada {
    from { opacity: 0; transform: scale(0.97) translateY(-10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
  }
  
  .modal-header {
    padding: 18px 24px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .modal-close {
    background: none;
    border: none;
    font-size: 26px;
    color: #64748b;
    cursor: pointer;
    line-height: 1;
    border-radius: 6px;
    padding: 2px 8px;
  }
  
  .modal-close:hover {
    color: #0d2840;
    background: #e2e8f0;
  }
  
  .modal-body {
    padding: 20px 24px;
    overflow-y: auto;
  }



  /* ==========================================================
   ANIMACIONES Y MEJORAS VISUALES PARA TARJETAS DE ESTACIÓN
   ========================================================== */

/* 1. Animación de entrada al cargar la página (Fade + Slide Up) */
.grid-tarjetas-ampliada .card-estacion-ampliada {
  animation: entradaTarjeta 0.5s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  will-change: transform, box-shadow;
}

@keyframes entradaTarjeta {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* 2. Efecto Hover en las Tarjetas (Elevación 3D y Borde Sutil) */
.card-estacion-ampliada:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 12px 28px rgba(13, 40, 64, 0.12), 0 4px 10px rgba(0, 0, 0, 0.04) !important;
  border-color: #0d2840 !important;
}

/* 3. Animación de Latido (Pulse) en las Insignias de Estado */
.badge-verde {
  position: relative;
}

.badge-verde::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: inherit;
  background: inherit;
  z-index: -1;
  animation: pulsoBadge 2s infinite ease-in-out;
}

@keyframes pulsoBadge {
  0% { transform: scale(1); opacity: 0.8; }
  70% { transform: scale(1.15); opacity: 0; }
  100% { transform: scale(1); opacity: 0; }
}

/* 4. Efecto Feedback visual al hacer clic en la tarjeta */
.card-estacion-ampliada:active {
  transform: translateY(-2px) scale(0.99);
  transition: transform 0.05s ease;
}


/* ==========================================================
   PULSO / RESPLANDOR ANIMADO EN BORDES Y CAJAS VERDES
   ========================================================== */

/* Aseguramos que la caja verde permita posición relativa */
.status-ok,
.badge-verde {
  position: relative !important;
  z-index: 1;
}

/* Aplicamos una animación de brillo en la sombra/borde (Box-Shadow Pulse) */
.status-ok,
.badge-verde {
  animation: pulsoResplandor 2.2s infinite ease-in-out;
}

@keyframes pulsoResplandor {
  0% {
    box-shadow: 0 0 0 0 rgba(13, 113, 71, 0.5);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(13, 113, 71, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(13, 113, 71, 0);
  }
}


.btn-vista-active {
  color: #0d2840;
  background: #e2e8f0;
  border-color: #cbd5e1;
  cursor: default;
  pointer-events: none;
}

/* Botón de vista genérico/secundario (estilo uniforme) */
.btn-vista {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  color: #155b82;
  background-color: #ffffff;
  border: 1px solid #cfe2ee;
  border-radius: 7px;
  padding: 7px 16px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
}

.btn-vista:hover {
  background-color: #155b82;
  border-color: #155b82;
  color: #ffffff;
}

/* Botón de la vista ACTUAL/Seleccionada (color azul oscuro institucional) */
.btn-vista-active {
  background-color: #0d2840 !important;
  border-color: #0d2840 !important;
  color: #ffffff !important;
  cursor: default;
  pointer-events: none;
}