/* Portal de clientes Amerevo — hoja de estilo unica */
:root{
  --ink:#0b0b0b; --ink-2:#52514e; --muted:#898781;
  --surface:#ffffff; --plane:#f5f5f3; --surface-2:#fcfcfb;
  --line:#e5e4df; --line-strong:#c9c8c1;
  --nav:#101010; --nav-2:#1c1c1b; --nav-ink:#f3f3f0; --nav-muted:#8f8e88;
  --accent:#2a78d6; --accent-soft:#eaf2fd;
  --good:#0ca30c; --warning:#fab219; --serious:#ec835a; --critical:#d03b3b;
  /* Un color por familia de robot. Son fijos a proposito: el cliente aprende
     que el azul verdoso es limpieza y el ambar es sala, y lo lee de un vistazo
     aunque su marca tenga otro color. */
  --fam-limpieza:#1f8a8a; --fam-limpieza-soft:#e6f4f4;
  --fam-servicio:#b8365f; --fam-servicio-soft:#fceef3;
  --radius:10px; --radius-lg:14px;
  --shadow:0 1px 2px rgba(11,11,11,.06), 0 8px 24px rgba(11,11,11,.05);
  --font:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--plane);font-size:14px;line-height:1.5}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit}
h1,h2,h3{margin:0;font-weight:650;letter-spacing:-.01em}
h1{font-size:22px}
h2{font-size:16px}
h3{font-size:14px}

/* ---------- login ---------- */
.login{min-height:100vh;display:grid;place-items:center;background:
  radial-gradient(1200px 600px at 20% -10%, #ffffff 0%, #efefec 55%, #e7e7e3 100%)}
.login-card{width:min(420px,92vw);background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:32px;box-shadow:var(--shadow)}
.login-card img.logo{height:34px;display:block;margin:0 auto 6px}
.login-card p.sub{text-align:center;color:var(--ink-2);margin:0 0 24px}
.login-mascot{height:96px;display:block;margin:0 auto 12px}

/* ---------- estructura ---------- */
.app{display:grid;grid-template-columns:236px 1fr;min-height:100vh}
.sidebar{background:var(--nav);color:var(--nav-ink);display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.sidebar .brand{padding:20px 18px 16px;border-bottom:1px solid #262625}
.sidebar .brand img{height:26px;display:block}
/* El logo del cliente se dibuja sobre el fondo que Amerevo elija por cliente:
   claro (logo oscuro o de color) u oscuro (logo blanco). Nunca se recorta. */
.sidebar .brand img.logo-cliente{height:auto;max-height:40px;max-width:170px;object-fit:contain}
.sidebar .brand img.logo-cliente.fondo-claro{background:#fff;padding:7px 10px;border-radius:8px}
@media(max-width:820px){
  .sidebar .brand img.logo-cliente{max-height:30px;max-width:130px}
  .sidebar .brand img.logo-cliente.fondo-claro{padding:5px 8px}
}
/* En la pantalla de acceso la tarjeta es blanca: un logo blanco necesita su plaquita. */
.login-card img.logo.fondo-oscuro{background:#111110;padding:12px 16px;border-radius:10px}

/* subida de logo */
.logo-caja{display:flex;align-items:center;gap:14px;border:1px solid var(--line);
  border-radius:10px;padding:14px;background:var(--surface-2)}
.logo-caja .prev{width:120px;height:56px;display:grid;place-items:center;background:#fff;
  border:1px solid var(--line);border-radius:8px;overflow:hidden;flex:none}
.logo-caja .prev img{max-width:100%;max-height:100%;object-fit:contain}
.logo-caja .prev span{color:var(--muted);font-size:11.5px;text-align:center;padding:0 6px}
.color-fila{display:flex;align-items:center;gap:10px}
.color-fila input[type=color]{width:46px;height:38px;padding:2px;flex:none;cursor:pointer}
.color-aviso{font-size:12.5px;color:var(--ink-2)}
.sidebar .brand small{display:block;color:var(--nav-muted);font-size:11px;margin-top:8px;letter-spacing:.08em;text-transform:uppercase}
.sidebar .brand .quien{display:none}   /* solo se ve en la cabecera compacta de móvil */
.nav{padding:12px 10px;overflow:auto;flex:1}
.nav .group{color:var(--nav-muted);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;padding:14px 10px 6px}
.nav a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;color:var(--nav-ink);
  font-size:13.5px;text-decoration:none}
.nav a:hover{background:var(--nav-2);text-decoration:none}
.nav a.active{background:#fff;color:#0b0b0b;font-weight:600}
.nav a .ic{width:16px;height:16px;flex:none;opacity:.9}
.nav a.active .ic{opacity:1}
.nav a.solo-movil{display:none}
.sidebar .brand .salir-movil{display:none}
.nav .badge{margin-left:auto;background:var(--critical);color:#fff;border-radius:999px;
  font-size:11px;padding:1px 7px;font-weight:600}
.sidebar .foot{padding:14px 16px;border-top:1px solid #262625;font-size:12px;color:var(--nav-muted)}
.sidebar .foot b{color:#fff;display:block;font-size:13px;font-weight:600}

.main{min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:16px;padding:16px 28px;background:var(--surface);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.topbar .spacer{flex:1}
.content{padding:24px 28px 56px;max-width:1400px;width:100%}

/* ---------- componentes ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.card.pad0{padding:0;overflow:hidden}
.card h2{margin-bottom:2px}
.card .hint{color:var(--muted);font-size:12.5px}
.grid{display:grid;gap:16px}
.g4{grid-template-columns:repeat(4,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
@media(max-width:1100px){.g4{grid-template-columns:repeat(2,1fr)}.g3,.g2{grid-template-columns:1fr}}
/* En movil y tablet la barra lateral se convierte en una cabecera compacta */
@media(max-width:820px){
  .app{grid-template-columns:1fr}
  .sidebar{position:sticky;top:0;height:auto;z-index:10;min-width:0}
  .sidebar .brand{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:0}
  .sidebar .brand img{height:20px}
  .sidebar .brand small{display:none}
  .sidebar .brand .quien{display:block;margin-left:auto;text-align:right;font-size:11.5px;color:var(--nav-muted);line-height:1.3}
  .sidebar .brand .quien b{display:block;color:#fff;font-size:12.5px}
  .nav{display:flex;gap:6px;overflow-x:auto;max-width:100%;padding:0 12px 10px;flex:none;
       scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .nav::-webkit-scrollbar{display:none}
  .nav a{white-space:nowrap;padding:7px 12px;font-size:13px}
  .nav .group{display:none}
  .nav a .ic{display:none}
  .sidebar .foot{display:none}
  /* El pie con "Mi cuenta" y "Salir" no cabe en movil: van al final de las pestanas. */
  .nav a.solo-movil{display:block;color:var(--nav-muted)}
  /* Salir tiene que estar siempre a la vista, no al final de una tira que se desplaza. */
  .sidebar .brand .salir-movil{display:inline-block;margin-left:14px;flex:none;
    color:var(--nav-ink);font-size:12.5px;border:1px solid #3a3a38;border-radius:7px;padding:5px 11px}
  .nav a.solo-movil.sep{margin-left:10px;border-left:1px solid #333;padding-left:16px}
  .g4{grid-template-columns:1fr}
  .content{padding:16px 16px 48px}
  .topbar{padding:12px 16px}
  h1{font-size:20px}
  .modal-bg{padding:0;align-items:flex-end}
  .modal{border-radius:14px 14px 0 0;max-height:92vh;width:100%}
  .card{padding:16px}
  .seg button{padding:7px 11px;font-size:12.5px}
}

.tile .label{color:var(--ink-2);font-size:12.5px;display:flex;align-items:center;gap:7px}
.tile .value{font-size:30px;font-weight:680;letter-spacing:-.02em;margin-top:6px}
.tile .value small{font-size:14px;font-weight:500;color:var(--muted);margin-left:3px}
.tile .sub{color:var(--muted);font-size:12px;margin-top:2px}

.btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line-strong);background:var(--surface);
  color:var(--ink);padding:8px 14px;border-radius:8px;cursor:pointer;font-size:13.5px;font-weight:500}
.btn:hover{background:var(--surface-2);border-color:var(--muted)}
.btn.primary{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn.primary:hover{background:#2a2a28}
.btn.sm{padding:5px 10px;font-size:12.5px}
.btn:disabled{opacity:.5;cursor:not-allowed}

.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--surface)}
.seg button{border:0;background:transparent;padding:7px 14px;cursor:pointer;font-size:13px;color:var(--ink-2)}
.seg button.on{background:var(--ink);color:#fff;font-weight:600}

label.f{display:block;margin-bottom:12px}
label.f span{display:block;font-size:12.5px;color:var(--ink-2);margin-bottom:5px;font-weight:500}
input,select,textarea{width:100%;padding:9px 11px;border:1px solid var(--line-strong);border-radius:8px;
  font:inherit;background:var(--surface);color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:var(--accent)}
textarea{min-height:110px;resize:vertical}

table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-weight:600;color:var(--ink-2);padding:10px 14px;border-bottom:1px solid var(--line);
  background:var(--surface-2);font-size:12px;letter-spacing:.02em;position:sticky;top:0}
td{padding:11px 14px;border-bottom:1px solid var(--line)}
tbody tr:hover{background:var(--surface-2)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.table-wrap{max-height:560px;overflow:auto}

.pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:3px 10px;font-size:12px;font-weight:600;
  border:1px solid transparent}
.pill .dot{width:7px;height:7px;border-radius:50%}
.pill.on{background:#e8f7e8;color:#046b04;border-color:#c6ebc6}
.pill.off{background:#f0efec;color:#52514e;border-color:#e0dfd8}
.pill.warn{background:#fff6e0;color:#8a5d00;border-color:#f5e0ad}
.pill.bad{background:#fdeaea;color:#a32020;border-color:#f4c7c7}
.pill.info{background:var(--accent-soft);color:#19549b;border-color:#cfe2fa}

.robot-card{display:flex;flex-direction:column;gap:12px;cursor:pointer;transition:border-color .12s}
.robot-card:hover{border-color:var(--line-strong)}
.robot-card .top{display:flex;align-items:flex-start;gap:12px}
.robot-card .nm{font-weight:640;font-size:15px}
.robot-card .md{color:var(--muted);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar{height:6px;border-radius:999px;background:var(--line);overflow:hidden}
.bar > i{display:block;height:100%;border-radius:999px;background:var(--ink)}
.kv{display:flex;justify-content:space-between;font-size:12.5px;color:var(--ink-2);padding:3px 0}
.kv b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}

.empty{text-align:center;color:var(--muted);padding:44px 20px}
.empty img{height:96px;opacity:.85;margin-bottom:10px}

.tut-list{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.tut{display:block;padding:16px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);
  cursor:pointer;text-align:left}
.tut:hover{border-color:var(--line-strong);background:var(--surface-2)}
.tut .t{font-weight:620;margin-bottom:4px;color:var(--ink)}
.tut .s{color:var(--ink-2);font-size:12.5px}
.tut .m{color:var(--muted);font-size:11.5px;margin-top:8px;display:flex;gap:10px}
.prose{white-space:pre-wrap;line-height:1.65;color:var(--ink-2);font-size:14px}
.prose table{margin:10px 0;border:1px solid var(--line)}

.msg{border:1px solid var(--line);border-radius:var(--radius);padding:14px;background:var(--surface);margin-bottom:10px}
.msg.staff{background:var(--accent-soft);border-color:#cfe2fa}
.msg .who{font-size:12px;color:var(--ink-2);margin-bottom:6px;font-weight:600}
.msg .when{font-weight:400;color:var(--muted)}

.modal-bg{position:fixed;inset:0;background:rgba(11,11,11,.4);display:grid;place-items:center;z-index:50;padding:20px}
.modal{background:var(--surface);border-radius:var(--radius-lg);width:min(560px,100%);max-height:88vh;overflow:auto;
  box-shadow:0 24px 60px rgba(0,0,0,.25)}
.modal header{padding:18px 22px;border-bottom:1px solid var(--line);display:flex;align-items:center}
.modal .body{padding:22px}
.modal footer{padding:14px 22px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:10px}

.toast{position:fixed;right:20px;bottom:20px;background:var(--ink);color:#fff;padding:12px 18px;border-radius:10px;
  z-index:100;box-shadow:var(--shadow);font-size:13.5px;max-width:380px}
.toast.err{background:var(--critical)}
.err-text{color:var(--critical);font-size:13px;margin-bottom:10px}

/* ---------- graficos ---------- */
.chart{position:relative;width:100%}
.chart svg{display:block;width:100%;overflow:visible}
.chart .tip{position:absolute;pointer-events:none;background:var(--ink);color:#fff;padding:7px 10px;border-radius:8px;
  font-size:12px;white-space:nowrap;transform:translate(-50%,-125%);opacity:0;transition:opacity .1s;z-index:3}
.chart .tip b{font-variant-numeric:tabular-nums}
.legend{display:flex;gap:16px;font-size:12px;color:var(--ink-2);margin-top:10px}
.legend i{width:10px;height:10px;border-radius:2px;display:inline-block;margin-right:6px}

/* Marca del cliente en escritorio: la cabecera entera adopta el fondo del logo,
   asi no parece una pegatina pegada encima. En movil la cabecera es una fila
   con el nombre del usuario en blanco, por eso se queda como esta. */
@media(min-width:821px){
  .sidebar .brand:has(img.logo-cliente) img.logo-cliente{padding:0;max-height:46px;max-width:100%;margin:0 auto}
  .sidebar .brand:has(img.logo-cliente) small{text-align:center;font-size:9.5px;margin-top:10px}
  .sidebar .brand:has(img.fondo-claro){background:#fff;border-bottom:1px solid #e2e0da;padding:18px 16px 14px}
  .sidebar .brand:has(img.fondo-claro) img.logo-cliente{background:none}
  .sidebar .brand:has(img.fondo-claro) small{color:#9a988f}
}

/* Plano del robot con su posicion en vivo */
.mapa-caja{position:relative;display:inline-block;max-width:100%;border:1px solid var(--line);
  border-radius:10px;overflow:hidden;background:var(--surface-2)}
.mapa-caja img{display:block;max-width:100%;height:auto}
.mapa-punto{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;
  background:var(--accent,#2a78d6);border:2px solid #fff;box-shadow:0 0 0 2px rgba(0,0,0,.15)}
.mapa-punto::after{content:'';position:absolute;inset:-6px;border-radius:50%;
  border:2px solid var(--accent,#2a78d6);opacity:.55;animation:latido 2s ease-out infinite}
@keyframes latido{0%{transform:scale(.6);opacity:.55}100%{transform:scale(1.6);opacity:0}}
@media (prefers-reduced-motion: reduce){.mapa-punto::after{animation:none}}

/* Aviso dentro de un formulario: algo que el cliente debe leer antes de darle a Enviar. */
.aviso{background:#fff6e0;border:1px solid #f5e0ad;color:#7a5200;border-radius:8px;
  padding:10px 12px;font-size:12.5px;line-height:1.45;margin-top:10px}

/* --- Secciones del panel por familia de robot ----------------------------- */
/* El panel de un cliente con robots de limpieza Y de sala mezclaba los dos
   tipos de dato sin separacion: catorce numeros seguidos que no se leen de un
   vistazo. Cada bloque lleva ahora su cabecera y su color. */
.seccion{display:flex;align-items:center;gap:10px;margin:26px 0 12px}
.seccion:first-child{margin-top:0}
.seccion h2{font-size:15px}
.seccion .marca{width:9px;height:9px;border-radius:50%;flex:none}
.seccion .cuenta{color:var(--muted);font-size:12.5px}
.seccion .raya{flex:1;height:1px;background:var(--line)}
.seccion.limpieza .marca{background:var(--fam-limpieza)}
.seccion.servicio .marca{background:var(--fam-servicio)}

.tile.limpieza{border-top:3px solid var(--fam-limpieza)}
.tile.servicio{border-top:3px solid var(--fam-servicio)}
.card.limpieza h2::before,.card.servicio h2::before{
  content:'';display:inline-block;width:8px;height:8px;border-radius:50%;
  margin-right:8px;vertical-align:middle}
.card.limpieza h2::before{background:var(--fam-limpieza)}
.card.servicio h2::before{background:var(--fam-servicio)}

/* Hora del ultimo dato, en la cabecera de la pagina. */
.frescura{color:var(--muted);font-size:12px;display:flex;align-items:center;gap:6px}
.frescura .led{width:7px;height:7px;border-radius:50%;background:var(--good);flex:none}
.frescura.viejo .led{background:var(--warning)}
.frescura.muyviejo .led{background:var(--critical)}

/* Tarjetas de la flota: una franja del color de su familia para distinguir de
   un vistazo los de limpieza de los de sala. */
.robot-card.limpieza{border-left:3px solid var(--fam-limpieza)}
.robot-card.servicio{border-left:3px solid var(--fam-servicio)}
.punto-fam{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;
  vertical-align:middle;background:var(--muted)}
.robot-card.limpieza .punto-fam{background:var(--fam-limpieza)}
.robot-card.servicio .punto-fam{background:var(--fam-servicio)}

/* Franja de estado general de la flota, encima de los bloques por familia. */
.card.franja{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:12px 16px;
  margin-bottom:18px;color:var(--ink-2);font-size:13px}
.card.franja b{color:var(--ink);font-size:15px;margin-right:3px}
.card.franja b.lim{color:var(--fam-limpieza)}
.card.franja b.ser{color:var(--fam-servicio)}
.card.franja .sep{width:1px;height:16px;background:var(--line)}

/* Botón de acción irreversible: se ve distinto antes de pulsarlo, no después. */
.btn.peligro{background:var(--critical);color:#fff;border-color:var(--critical)}
.btn.peligro:hover{background:#b33131;border-color:#b33131}
.btn.sm.peligro{background:var(--surface);color:var(--critical);border-color:#e8c3c3}
.btn.sm.peligro:hover{background:#fdf2f2;border-color:var(--critical)}

/* Bloque plegable para lo que no debe estorbar: bajas, historiales viejos. */
details.plegable > summary{cursor:pointer;color:var(--ink-2);font-size:13px;padding:8px 2px;
  list-style:none;display:flex;align-items:center;gap:8px}
details.plegable > summary::-webkit-details-marker{display:none}
details.plegable > summary::before{content:'▸';color:var(--muted);font-size:11px}
details.plegable[open] > summary::before{content:'▾'}
details.plegable > summary:hover{color:var(--ink)}
details.plegable .card{opacity:.7}
details.plegable[open] .card{opacity:1}

/* Pestañas por familia dentro de una página (Informes). */
.seg.tabs-fam button.on{background:var(--ink);color:#fff}