/* Seguimiento 360 - Portal. Hoja compartida. */
:root{--bg:#0f172a;--panel:#1e293b;--panel2:#26344a;--linea:#334155;
--txt:#e2e8f0;--txt2:#94a3b8;--acc:#667eea;--acc2:#5568d3;
--ok:#10b981;--warn:#f59e0b;--err:#ef4444;}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Segoe UI',system-ui,sans-serif;background:var(--bg);
color:var(--txt);min-height:100vh;line-height:1.5;}
a{color:var(--acc);text-decoration:none;}
a:hover{text-decoration:underline;}

/* --- Login / registro --- */
.centrado{min-height:100vh;display:flex;align-items:center;
justify-content:center;padding:20px;}
.tarjeta{background:var(--panel);padding:40px;border-radius:12px;
box-shadow:0 10px 25px rgba(0,0,0,.3);max-width:420px;width:100%;}
.tarjeta h1{font-size:1.6rem;margin-bottom:6px;text-align:center;}
.tarjeta .sub{color:var(--txt2);text-align:center;margin-bottom:26px;
font-size:.9rem;}
.campo{margin-bottom:18px;}
.campo label{display:block;margin-bottom:7px;font-size:.9rem;font-weight:500;}
.campo input,.campo select{width:100%;padding:12px;border:2px solid var(--linea);
border-radius:8px;font-size:.95rem;background:var(--bg);color:var(--txt);
font-family:inherit;}
.campo input:focus,.campo select:focus{outline:none;border-color:var(--acc);}
.btn{width:100%;padding:13px;background:var(--acc);color:#fff;border:none;
border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;
font-family:inherit;transition:.2s;}
.btn:hover:not(:disabled){background:var(--acc2);}
.btn:disabled{opacity:.6;cursor:not-allowed;}
.pie{text-align:center;margin-top:22px;padding-top:18px;
border-top:1px solid var(--linea);font-size:.9rem;color:var(--txt2);}
.msg{padding:12px;border-radius:8px;margin-bottom:18px;display:none;
font-size:.9rem;}
.msg.ok{background:rgba(16,185,129,.15);color:#6ee7b7;
border:1px solid var(--ok);display:block;}
.msg.err{background:rgba(239,68,68,.15);color:#fca5a5;
border:1px solid var(--err);display:block;}

/* --- Cabecera de la app --- */
header.barra{background:var(--panel);border-bottom:1px solid var(--linea);
padding:14px 20px;display:flex;justify-content:space-between;
align-items:center;position:sticky;top:0;z-index:10;}
header.barra .marca{font-weight:700;font-size:1.05rem;}
header.barra nav{display:flex;gap:6px;align-items:center;flex-wrap:wrap;}
header.barra nav a{padding:7px 13px;border-radius:7px;font-size:.88rem;
color:var(--txt2);}
header.barra nav a:hover{background:var(--panel2);color:var(--txt);
text-decoration:none;}
header.barra nav a.act{background:var(--acc);color:#fff;}
.salir{background:none;border:1px solid var(--linea);color:var(--txt2);
padding:7px 13px;border-radius:7px;cursor:pointer;font-size:.85rem;
font-family:inherit;}
.salir:hover{border-color:var(--err);color:#fca5a5;}
main{max-width:1100px;margin:0 auto;padding:24px 20px 60px;}
h2.titulo{font-size:1.35rem;margin-bottom:4px;}
p.desc{color:var(--txt2);font-size:.9rem;margin-bottom:22px;}

/* --- Tarjetas --- */
.rejilla{display:grid;gap:16px;}
.rejilla.d2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));}
.rejilla.d3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
.bloque{background:var(--panel);border:1px solid var(--linea);
border-radius:10px;padding:18px;}
.bloque h3{font-size:1rem;margin-bottom:10px;}
.metrica{font-size:1.9rem;font-weight:700;line-height:1.1;}
.metrica+.etq{color:var(--txt2);font-size:.82rem;margin-top:4px;}

/* --- Estados --- */
.pastilla{display:inline-block;padding:3px 10px;border-radius:20px;
font-size:.75rem;font-weight:600;text-transform:uppercase;
letter-spacing:.03em;}
.p-ok{background:rgba(16,185,129,.18);color:#6ee7b7;}
.p-err{background:rgba(239,68,68,.18);color:#fca5a5;}
.p-warn{background:rgba(245,158,11,.18);color:#fcd34d;}
.p-gris{background:var(--panel2);color:var(--txt2);}

/* --- Tablas --- */
.tabla-env{overflow-x:auto;border:1px solid var(--linea);
border-radius:10px;background:var(--panel);}
table{width:100%;border-collapse:collapse;font-size:.88rem;}
th{background:var(--panel2);padding:11px 14px;text-align:left;
font-weight:600;font-size:.8rem;text-transform:uppercase;
letter-spacing:.04em;color:var(--txt2);white-space:nowrap;}
td{padding:11px 14px;border-top:1px solid var(--linea);}
tbody tr:hover{background:rgba(255,255,255,.02);}
.mono{font-family:ui-monospace,Consolas,monospace;font-size:.82rem;}

/* --- Estados de carga --- */
.cargando{text-align:center;padding:50px 20px;color:var(--txt2);}
.vacio{text-align:center;padding:50px 20px;color:var(--txt2);}
.girador{width:34px;height:34px;border:3px solid var(--linea);
border-top-color:var(--acc);border-radius:50%;margin:0 auto 14px;
animation:girar .8s linear infinite;}
@keyframes girar{to{transform:rotate(360deg);}}
/* (sustituido por el bloque de movil al final del archivo) */


/* --- Aviso de activacion de notificaciones --- */
.aviso-push {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  background: linear-gradient(135deg, #1e2a44 0%, #1a2131 100%);
  border: 1px solid #35507f;
  border-left: 4px solid var(--acc, #4f7cff);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 22px;
}
.aviso-push-icono {
  font-size: 1.7rem;
  line-height: 1;
  flex-shrink: 0;
}
.aviso-push-texto {
  flex: 1 1 260px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.aviso-push-texto strong {
  font-size: .98rem;
  color: var(--txt, #e8ecf4);
}
.aviso-push-texto span {
  font-size: .85rem;
  color: var(--txt2, #8e9bb3);
  line-height: 1.45;
}
.aviso-push-acciones {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.btn-aviso-principal {
  background: var(--acc, #4f7cff);
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.btn-aviso-principal:disabled { opacity: .6; cursor: default; }
.btn-aviso-secundario {
  background: transparent;
  color: var(--txt2, #8e9bb3);
  border: 1px solid #35507f;
  border-radius: 8px;
  width: 34px;
  height: 34px;
  font-size: .95rem;
  cursor: pointer;
  line-height: 1;
}
.aviso-push-estado {
  flex-basis: 100%;
  font-size: .82rem;
  color: var(--ok, #4ade80);
  min-height: 0;
}
.aviso-push-estado:empty { display: none; }




/* --- Acceso al diagnostico de notificaciones --- */
.barra .ayuda {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 4px;
  padding: 6px 12px;
  border: 1px solid #35507f;
  border-radius: 8px;
  color: var(--txt2, #8e9bb3);
  text-decoration: none;
  font-size: .85rem;
  white-space: nowrap;
}
.barra .ayuda:hover {
  border-color: var(--acc, #4f7cff);
  color: var(--txt, #e8ecf4);
}
.ayuda-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #35507f;
  color: #e8ecf4;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
}


/* ==================================================================
   Ajustes para movil  (Seguimiento 360 - Portal)
   ==================================================================
   En pantallas estrechas los tamanos en rem quedaban por debajo de los
   13px: etiquetas de metrica 13.1px, cabeceras de tabla 12.8px, celdas
   13.1px. Incomodos de leer en un telefono.

   Aqui se suben y se aprovecha mejor el espacio. No afecta al
   escritorio: todo va dentro de media queries.
   ================================================================== */

/* ==================================================================
   Ajustes para pantallas estrechas
   ==================================================================
   Se aplican por debajo de 700px de ancho. Los tamanos son un 10% mas
   bajos que en el intento anterior: el texto base queda en 14.8px, un
   punto medio comodo entre el escritorio (16px) y lo que resultaba
   demasiado grande.
   ================================================================== */

@media (max-width: 700px) {

  /* --- Texto base --- */
  body { font-size: .93rem; }                 /* 14.9px */

  /* --- Cabecera --- */
  header.barra {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 11px 13px;
  }
  header.barra .marca { font-size: .99rem; width: 100%; }
  header.barra nav { gap: 5px; width: 100%; }
  header.barra nav a { padding: 8px 11px; font-size: .79rem; }
  .salir { padding: 8px 11px; font-size: .77rem; }
  .barra .ayuda { padding: 8px 10px; font-size: .83rem; }
  .ayuda-icono { width: 17px; height: 17px; font-size: .7rem; }

  /* --- Contenido --- */
  main { padding: 16px 14px 50px; }
  h2.titulo { font-size: 1.22rem; }
  p.desc { font-size: .88rem; margin-bottom: 16px; }

  /* --- Metricas: dos por fila --- */
  .rejilla.d3, .rejilla.d2 {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .bloque { padding: 14px 12px; }
  .metrica { font-size: 1.62rem; }
  .metrica + .etq { font-size: .83rem; }
  .bloque h3 { font-size: .9rem; }

  /* --- Tablas: como tarjetas apiladas --- */
  table, thead, tbody, tr, td { display: block; width: 100%; }
  thead { display: none; }
  table { font-size: .9rem; border: 0; background: none; }

  tbody tr {
    background: var(--panel2);
    border: 1px solid var(--linea);
    border-radius: 10px;
    padding: 11px 12px;
    margin-bottom: 9px;
  }
  tbody tr:hover { background: var(--panel2); }

  td {
    padding: 4px 0;
    border: 0;
    font-size: .84rem;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    text-align: right;
  }
  td::before {
    content: attr(data-etiqueta);
    flex: 0 0 auto;
    color: var(--txt2);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    text-align: left;
  }
  td:first-child {
    font-weight: 600;
    font-size: .87rem;
    border-bottom: 1px solid var(--linea);
    padding-bottom: 8px;
    margin-bottom: 4px;
  }
  td:first-child::before { content: none; }

  .mono { font-size: .81rem; }

  /* --- Aviso de notificaciones --- */
  .aviso-push { padding: 14px; gap: 11px; }
  .aviso-push-icono { font-size: 1.71rem; }
  .aviso-push-texto { flex-basis: 100%; }
  .aviso-push-texto strong { font-size: .9rem; }
  .aviso-push-texto span { font-size: .79rem; }
  .aviso-push-acciones { flex-basis: 100%; }
  .btn-aviso-principal { flex: 1; padding: 11px 15px; font-size: .84rem; }
  .btn-aviso-secundario { width: 40px; height: 40px; font-size: .95rem; }

  /* --- Formularios --- */
  .campo { margin-bottom: 17px; }
  .campo label { font-size: .84rem; margin-bottom: 7px; }
  .campo input, .campo select { padding: 12px 12px; font-size: .86rem; }

  /* --- Botones --- */
  button { font-size: .86rem; padding: 12px 15px; }

  /* --- Login y registro --- */
  .tarjeta { padding: 26px 18px; }
  .tarjeta h1 { font-size: 1.4rem; }
  .tarjeta .sub { font-size: .83rem; }
}

/* --- Pantallas muy estrechas: una metrica por fila --- */
@media (max-width: 400px) {
  .rejilla.d3, .rejilla.d2 { grid-template-columns: 1fr; }
  header.barra nav a { padding: 7px 10px; font-size: .78rem; }
  .metrica { font-size: 1.7rem; }
}

/* --- En pantallas estrechas, el boton de Ayuda solo muestra el icono --- */
@media (max-width: 700px) {
  .barra .ayuda-texto { display: none; }
}

/* ==================================================================
   Respaldo para pantallas tactiles anchas
   ==================================================================
   Si un dispositivo tactil tiene mas de 700px de ancho (una tablet, o
   un movil con "sitio de escritorio" activado), el bloque anterior no
   se aplica. Estas reglas cubren ese caso por el tipo de puntero.
   ================================================================== */
@media (pointer: coarse) and (min-width: 701px) {

  body { font-size: .93rem; }

  table, thead, tbody, tr, td { display: block; width: 100%; }
  thead { display: none; }
  table { font-size: .9rem; border: 0; background: none; }

  tbody tr {
    background: var(--panel2);
    border: 1px solid var(--linea);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 10px;
  }
  td {
    padding: 5px 0;
    border: 0;
    font-size: .84rem;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    text-align: right;
  }
  td::before {
    content: attr(data-etiqueta);
    flex: 0 0 auto;
    color: var(--txt2);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    text-align: left;
  }
  td:first-child {
    font-weight: 600;
    font-size: .87rem;
    border-bottom: 1px solid var(--linea);
    padding-bottom: 9px;
    margin-bottom: 5px;
  }
  td:first-child::before { content: none; }

  .metrica + .etq { font-size: .83rem; }
  p.desc { font-size: .88rem; }
  .mono { font-size: .81rem; }

  header.barra nav a, .salir { padding: 9px 13px; font-size: .82rem; }
  .barra .ayuda { padding: 9px 12px; font-size: .83rem; }

  button, .btn { font-size: .86rem; padding: 12px 16px; }
  .campo input, .campo select { font-size: .86rem; padding: 13px; }
  .campo label { font-size: .84rem; }

  .rejilla.d3, .rejilla.d2 { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .metrica { font-size: 1.8rem; }
  .bloque h3 { font-size: .95rem; }
}

/* ==================================================================
   Cabecera: usuario fuera del menu y menu hamburguesa
   ================================================================== */

/* La barra reparte: marca a la izquierda, resto a la derecha */
header.barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  background: var(--panel);
  border-bottom: 1px solid var(--linea);
}

header.barra .marca {
  font-weight: 700;
  font-size: 1.05rem;
  white-space: nowrap;
}

/* Zona derecha: nombre del usuario y boton de menu */
.barra-der {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.usuario {
  color: var(--txt2);
  font-size: .9rem;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Boton hamburguesa --- */
.menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: 1px solid var(--linea);
  border-radius: 9px;
  cursor: pointer;
  flex-shrink: 0;
}
.menu-btn:hover { border-color: var(--acc); }

.menu-lineas {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 18px;
  height: 13px;
}
.menu-lineas i {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--txt);
  border-radius: 1px;
  transition: transform .18s ease, opacity .18s ease;
}

/* Al abrir, las tres lineas forman una X */
.menu-btn.activo .menu-lineas i:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.menu-btn.activo .menu-lineas i:nth-child(2) { opacity: 0; }
.menu-btn.activo .menu-lineas i:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* --- Menu desplegable --- */
.menu {
  display: none;
  flex-direction: column;
  gap: 2px;
  background: var(--panel);
  border-bottom: 1px solid var(--linea);
  padding: 8px 12px 14px;
}
.menu.abierto { display: flex; }

.menu a {
  padding: 12px 14px;
  border-radius: 8px;
  color: var(--txt);
  font-size: 1rem;
  text-decoration: none;
}
.menu a:hover { background: var(--panel2); text-decoration: none; }
.menu a.act { background: var(--acc); color: #fff; }

.menu .menu-salir {
  margin-top: 6px;
  text-align: left;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 1rem;
  border: 1px solid var(--linea);
  background: none;
  color: var(--txt2);
  cursor: pointer;
}
.menu .menu-salir:hover { border-color: var(--err); color: #fca5a5; }

/* --- En pantallas anchas el menu se abre en columna estrecha --- */
@media (min-width: 701px) {
  .menu.abierto {
    position: absolute;
    right: 18px;
    top: 58px;
    min-width: 210px;
    border: 1px solid var(--linea);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,.4);
    z-index: 100;
    padding: 8px;
  }
}

/* --- En movil, el nombre se recorta antes --- */
@media (max-width: 700px) {
  header.barra { padding: 11px 14px; }
  header.barra .marca { font-size: .95rem; }
  .usuario { font-size: .85rem; max-width: 110px; }
  .menu-btn { width: 38px; height: 38px; }
  .menu a, .menu .menu-salir { font-size: .93rem; padding: 11px 13px; }
}

.marca-icono { width: 1.15em; height: 1.15em; vertical-align: -0.18em; object-fit: contain; }