/*
 * estilos.css
 * Hoja unica. Estetica sobria de app de escritorio.
 * Tipografia limpia, radios de 4px, colores sobrios, rejilla alineada.
 */

:root{
  --tinta:#111418;
  --linea:#d3d9e2;
  --suave:#eef1f6;
  --muted:#5f6874;
  --navy:#14215c;
  --ok:#1a8a5a;
  --off:#b0b8c4;
  --error:#b83227;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:'Segoe UI',Inter,Roboto,system-ui,-apple-system,sans-serif;
  color:var(--tinta);background:#e9edf3;font-size:14px;line-height:1.45;
}

/* ---- Centrado (login / instalador / portada) ---- */
.fondo-centro{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:16px}
.tarjeta-login{background:#fff;border:1px solid var(--linea);border-radius:6px;
  padding:26px;width:320px;box-shadow:0 8px 24px rgba(20,33,92,.10)}
.tarjeta-login.ancho{width:360px}
.marca{font-size:18px;color:var(--navy);text-align:center}
.sub{font-size:12px;color:var(--muted);text-align:center;margin:4px 0 18px}

/* ---- Campos uniformes ---- */
.etq{display:block;font-size:12px;color:var(--muted);margin:10px 0 4px}
.campo{width:100%;height:38px;border:1px solid var(--linea);border-radius:4px;
  padding:0 10px;font-size:14px;font-family:inherit;background:#fff;color:var(--tinta)}
.campo:focus{outline:2px solid var(--navy);outline-offset:-1px}
.campo.area{height:auto;padding:10px;resize:vertical}

/* ---- Botones ---- */
.btn-primario{height:40px;padding:0 18px;border:0;border-radius:4px;background:var(--navy);
  color:#fff;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit}
.btn-secundario{height:40px;padding:0 16px;border:1px solid var(--linea);border-radius:4px;
  background:#fff;color:var(--tinta);font-size:13px;font-weight:600;cursor:pointer;
  text-decoration:none;display:inline-flex;align-items:center;justify-content:center;font-family:inherit}
.btn-primario.bloque,.btn-secundario.bloque{width:100%;margin-top:12px;
  display:flex;align-items:center;justify-content:center;text-decoration:none}
.btn-secundario.chico{height:32px;padding:0 12px;font-size:12px}
.btn-secundario.btn-peligro{color:var(--error);border-color:#eec4bd}
.btn-secundario.btn-peligro:hover{background:#fbeae8}

/* ---- Avisos ---- */
.aviso{padding:9px 12px;border-radius:4px;font-size:13px;margin-bottom:12px}
.aviso.ok{background:#e4f4ec;color:var(--ok);border:1px solid #b8e0cc}
.aviso.error{background:#fbeae8;color:var(--error);border:1px solid #eec4bd}
.nota{font-size:12px;color:var(--muted);margin-top:8px}

/* ---- Barra superior y pestanas ---- */
.barra{background:var(--navy);color:#fff;height:48px;display:flex;align-items:center;
  justify-content:space-between;padding:0 16px}
.barra-titulo{font-size:15px;font-weight:600}
.barra-salir{color:#fff;font-size:13px;text-decoration:none;opacity:.9}
.tabs{background:#fff;border-bottom:1px solid var(--linea);display:flex;gap:2px;padding:0 12px}
.tab{padding:11px 14px;font-size:13px;color:var(--muted);text-decoration:none;border-bottom:2px solid transparent}
.tab.activa{color:var(--navy);font-weight:700;border-bottom-color:var(--navy)}

/* ---- Contenedor y bloques ---- */
.contenedor{max-width:920px;margin:18px auto;padding:0 16px}
.bloque-panel{background:#fff;border:1px solid var(--linea);border-radius:6px;padding:16px;margin-bottom:16px}
.bloque-panel.resalte{border-color:#e6c99a;background:#fffdf7}
.titulo{font-size:16px;color:var(--navy);margin-bottom:12px}
.titulo-fila{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.titulo-fila .titulo{margin:0}
.fila-inline{display:flex;gap:10px;align-items:center}
.fila-inline .campo{flex:1}
.fila-botones{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.inline{display:inline}
.rejilla2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}

/* ---- Tablas estilo Excel ---- */
.tabla{width:100%;border-collapse:collapse;font-size:13px}
.tabla th,.tabla td{border:1px solid var(--linea);padding:8px 10px;text-align:left;vertical-align:middle}
.tabla.excel thead th{background:var(--suave);color:var(--navy);font-size:12px;
  text-transform:uppercase;letter-spacing:.3px}
.tabla.excel tbody tr:nth-child(even) td{background:#f7f9fc}
.mono{font-family:Consolas,monospace;font-size:12px;color:var(--navy)}
.num{text-align:right;font-weight:700}

/* ---- Chips de estado ---- */
.chip{display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:4px}
.chip.ok{background:#e4f4ec;color:var(--ok);border:1px solid #b8e0cc}
.chip.pend{background:#fbf1df;color:#a15c00;border:1px solid #eddba0}

/* ---- Switch activar / desactivar ---- */
.switch{width:42px;height:23px;border-radius:12px;position:relative;border:0;cursor:pointer;display:inline-block}
.switch.on{background:var(--ok)}
.switch.off{background:var(--off)}
.switch::after{content:"";position:absolute;top:2px;width:19px;height:19px;border-radius:50%;background:#fff;transition:.15s}
.switch.on::after{left:21px}
.switch.off::after{left:2px}

/* ---- Caja de terminos (registro) ---- */
.terminos-caja{max-height:120px;overflow:auto;border:1px solid var(--linea);border-radius:4px;
  padding:10px;font-size:12px;color:var(--muted);margin:8px 0 4px;background:#fafbfc}

/* ---- Redes en el panel ---- */
.net{display:grid;grid-template-columns:150px 1fr;gap:10px;align-items:center;margin-bottom:8px}
.net .tag{font-size:12px;display:flex;align-items:center;gap:7px;color:var(--tinta)}
.net .dot{width:16px;height:16px;border-radius:4px;flex:0 0 auto}
.campo.chico{max-width:130px}

/* ---- Catalogo en el panel ---- */
.cat-fila{display:grid;grid-template-columns:80px 1fr;gap:12px;align-items:start;
  padding:10px;border:1px solid var(--linea);border-radius:6px;margin-bottom:10px}
.cat-foto{width:80px;height:80px;border:1px solid var(--linea);border-radius:6px;background:var(--suave);
  display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--muted);font-size:11px}
.cat-foto img{width:100%;height:100%;object-fit:cover}

/* ---- Footer de marca (clickeable) ---- */
.pie-marca{text-align:center;padding:16px 0 10px;font-size:12px}
.pie-marca a{color:#8a94a3;text-decoration:none}
.pie-marca a:hover{color:#5f6874;text-decoration:underline}
.card-pie{text-align:center;margin-top:12px;font-size:11px}
.card-pie a{color:#ffffff;opacity:.85;text-decoration:none}

/* ---- Realidad Aumentada (Panel Maestro) ---- */
.ra-arte-caja{border:1px solid var(--linea);border-radius:6px;background:var(--suave);
  padding:10px;display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.ra-arte-caja img{max-width:100%;max-height:220px;border-radius:4px;display:block}
.ra-fila-info{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.ra-progreso{width:100%;height:12px;border:1px solid var(--linea);border-radius:4px;
  background:var(--suave);overflow:hidden;margin-top:12px}
.ra-progreso-barra{height:100%;width:0%;background:var(--navy);transition:width .2s}

/* Responsive movil: en pantallas angostas los pares se apilan a 1 columna
   para que los campos no queden apretados en el celular. */
@media (max-width: 560px) {
  .rejilla2 { grid-template-columns: 1fr; gap: 10px; }
  .contenedor { padding: 0 12px; }
  .fila-inline { flex-wrap: wrap; }
}

/* Enlaces para leer terminos/privacidad antes de aceptar (registro) */
.terminos-enlaces{margin:8px 0 4px;font-size:12px}
.terminos-enlaces a{color:var(--navy);text-decoration:underline}
.terminos-enlaces .sep{color:#9aa1ac;margin:0 6px}

/* Datos de contacto (Panel Maestro): vista previa de logo y separacion */
.mc-logo-prev{margin:8px 0}
.mc-logo-prev img{max-width:120px;max-height:120px;padding:6px;border:1px solid var(--linea);border-radius:6px;background:#f2f4f8;display:block}
.bloque-sep{margin-top:12px}