@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=Public+Sans:wght@400;500;600&display=swap');

:root{
  --navy:#0c264a;
  --navy-claro:#16386a;
  --ambar:#ff9406;
  --menta:#7ce1bc;
  --rojo:#c0392b;
  --papel:#f7f5f0;
  --tinta:#16202e;
  --gris:#6a7688;
  --borde:#e2ded5;
  --alto:#ffffff;
  --radio:14px;
  --sombra:0 1px 2px rgba(12,38,74,.06), 0 8px 24px rgba(12,38,74,.06);
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'Public Sans',sans-serif;
  background:var(--papel);
  color:var(--tinta);
  font-size:16px;line-height:1.5;
  /* Trama sutil: da textura sin competir con el contenido */
  background-image:radial-gradient(circle at 1px 1px, rgba(12,38,74,.05) 1px, transparent 0);
  background-size:28px 28px;
}

h1,h2,h3,.display{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;letter-spacing:-.02em;line-height:1.1}
h1{font-size:2rem}
h2{font-size:1.4rem}

/* ---------- Estructura ---------- */
.barra{
  background:var(--navy);color:#fff;
  padding:14px 20px;display:flex;align-items:center;gap:20px;
  position:sticky;top:0;z-index:50;
}
.barra .marca{height:30px;width:auto;display:block}
.barra .cuenta{margin-left:auto;font-size:.9rem;color:#a9bcd4}
.barra .cuenta a{color:#fff;text-decoration:none;border-bottom:1px solid var(--ambar);padding-bottom:1px}
.barra .cuenta form.salir{display:inline;margin:0}
.barra .cuenta form.salir button{background:none;border:0;padding:0 0 1px;font:inherit;color:#fff;cursor:pointer;border-bottom:1px solid var(--ambar)}

.menu{
  background:var(--navy-claro);padding:0 20px;
  display:flex;gap:4px;overflow-x:auto;position:sticky;top:58px;z-index:49;
}
.menu a{
  color:#c7d5e8;text-decoration:none;padding:13px 16px;font-size:.95rem;font-weight:500;
  white-space:nowrap;border-bottom:3px solid transparent;
}
.menu a:hover{color:#fff}
.menu a.activo{color:#fff;border-bottom-color:var(--ambar)}

main{max-width:1100px;margin:0 auto;padding:28px 20px 80px}
.encabezado{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.encabezado .sub{color:var(--gris);margin-top:6px}
.encabezado .acciones{margin-left:auto;display:flex;gap:10px;flex-wrap:wrap}

/* ---------- Tarjetas y listas ---------- */
.tarjeta{background:var(--alto);border:1px solid var(--borde);border-radius:var(--radio);box-shadow:var(--sombra)}
.tarjeta + .tarjeta{margin-top:14px}
.tarjeta .cuerpo{padding:18px 20px}
.rejilla{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}

.fila{display:flex;align-items:center;gap:16px;padding:16px 20px;border-bottom:1px solid var(--borde)}
.fila:last-child{border-bottom:0}
.fila .crece{flex:1;min-width:0}
.fila .titulo{font-weight:600}
.fila .dato{color:var(--gris);font-size:.9rem}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--navy);color:#fff;border:0;border-radius:10px;
  min-height:44px;padding:11px 18px;font-family:inherit;font-size:.95rem;font-weight:600;
  cursor:pointer;text-decoration:none;transition:transform .08s ease, filter .15s ease;
}
.btn:hover{filter:brightness(1.15)}
.btn:active{transform:translateY(1px)}
.btn.ambar{background:var(--ambar);color:var(--navy)}
.btn.suave{background:transparent;color:var(--navy);border:1.5px solid var(--borde)}
.btn.peligro{background:transparent;color:#a8322a;border:1.5px solid #e8c9c5}
.btn:disabled{opacity:.35;cursor:not-allowed;filter:none}

/* ---------- Formularios ---------- */
label{display:block;font-weight:600;font-size:.9rem;margin-bottom:6px}
input[type=text],input[type=email],input[type=password],input[type=number],select,textarea{
  width:100%;padding:12px 14px;border:1.5px solid var(--borde);border-radius:10px;
  font-family:inherit;font-size:1rem;background:var(--alto);color:var(--tinta);
}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--navy);box-shadow:0 0 0 3px rgba(12,38,74,.1)}
.campo{margin-bottom:16px}
.ayuda{font-size:.85rem;color:var(--gris);margin-top:6px}

/* ---------- Selector de archivo (biblioteca): botón e input propios, ver consola.js ---------- */
.campo-archivo{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:2px}
.campo-archivo-entrada{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.campo-archivo-nombre{color:var(--gris);font-size:.9rem}

/* ---------- Medidor de uso (licencias y espacio) ---------- */
.medidor{background:var(--papel);border:1px solid var(--borde);border-radius:8px;height:10px;overflow:hidden;margin-top:10px}
.medidor-barra{background:var(--menta);height:100%;border-radius:8px 0 0 8px;transition:width .3s ease}

/* ---------- Estado del parque ---------- */
.estado{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:.9rem}
.punto{width:10px;height:10px;border-radius:50%;flex:none}
.estado.viva .punto{background:#17a673;box-shadow:0 0 0 4px rgba(23,166,115,.16)}
.estado.muerta .punto{background:var(--rojo);box-shadow:0 0 0 4px rgba(192,57,43,.14)}
.estado.nueva .punto{background:var(--ambar);box-shadow:0 0 0 4px rgba(255,148,6,.18)}

/* ---------- Estado del parque en vivo (Tarea 7): Al aire / Tapada / Sin señal / Aún no
   se conecta. El color nunca es la única señal: siempre va acompañado de la palabra. Verde
   de la misma familia que ya usaba .viva arriba (no el --menta pastel del medidor: como
   punto chico sobre blanco, --menta no da suficiente contraste). ---------- */
.estado.al-aire .punto{background:#17a673;box-shadow:0 0 0 4px rgba(23,166,115,.16)}
.estado.tapada .punto{background:var(--ambar);box-shadow:0 0 0 4px rgba(255,148,6,.18)}
.estado.sin-senal .punto{background:var(--rojo);box-shadow:0 0 0 4px rgba(192,57,43,.14)}
.estado.sin-conexion .punto{background:var(--gris);box-shadow:0 0 0 4px rgba(106,118,136,.14)}

/* ---------- Avisos ---------- */
.aviso{border-radius:12px;padding:14px 16px;margin-bottom:18px;border:1.5px solid}
.aviso.ok{background:#eefaf4;border-color:#b6e6d2;color:#0d5c40}
.aviso.error{background:#fdf0ee;border-color:#f0cdc7;color:#8f2e23}

/* ---------- Vacios: nunca dejar una pantalla en blanco ---------- */
.vacio{text-align:center;padding:56px 24px;color:var(--gris)}
.vacio h3{font-family:'Bricolage Grotesque',sans-serif;color:var(--tinta);margin-bottom:8px}
.vacio .btn{margin-top:18px}

@media (max-width:640px){
  h1{font-size:1.6rem}
  main{padding:20px 14px 60px}
  .fila{flex-wrap:wrap;gap:10px}
  /* Sin esto, el título y el dato de la fila (".crece") comparten la primera línea del
     wrap con el formulario vecino (por ejemplo, "Segundos" en una cartelera): al
     angostarse para hacerle espacio, su propio texto se corta a la mitad de una palabra
     ("Foto · 1" en una línea, "MB" solo en la siguiente). Con flex-basis:100% el título
     siempre ocupa su propia línea completa antes de que nada más se acomode debajo. */
  .fila .crece{flex-basis:100%}
  .encabezado .acciones{width:100%;margin-left:0}
  .encabezado .acciones .btn{flex:1;justify-content:center}
  /* Las 5 secciones del menú no caben en 390px: se puede desplazar hacia el costado
     (overflow-x:auto), pero sin ninguna pista se ve como una palabra cortada ("Car"). Un
     desvanecido en el borde derecho avisa, sin palabras, que hay más para el lado. */
  .menu{
    -webkit-mask-image:linear-gradient(to right, black calc(100% - 28px), transparent 100%);
    mask-image:linear-gradient(to right, black calc(100% - 28px), transparent 100%);
  }
}
/* Tarea 12: "Protegida" / "Sin proteger" junto a la version de la app */
.proteccion{font-weight:600}
.proteccion.si{color:#17a673}
.proteccion.no{color:var(--gris)}