/* ID-TECH · Panel */
:root {
  --azul: #0f2a4a; --azul2: #16406e; --naranja: #f28c00;
  --fondo: #f3f5f8; --tarjeta: #fff; --texto: #1c2430; --suave: #5d6b7c; --linea: #dfe4ea;
  --verde: #12805c; --ambar: #b76e00; --rojo: #c0392b; --gris: #7b8794;
  --radio: 10px;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color: var(--texto); background: var(--fondo); min-height: 100vh; display: flex; flex-direction: column; }
a { color: var(--azul2); }
h1 { font-size: 1.45rem; margin: 0 0 1rem; }
h2 { font-size: 1.1rem; margin: 1.5rem 0 .75rem; }

.barra { background: var(--azul); color: #fff; display: flex; align-items: center; gap: 1rem; padding: .6rem 1rem; position: sticky; top: 0; z-index: 10; }
.marca { display: flex; align-items: center; gap: .5rem; color: #fff; text-decoration: none; font-size: 1.15rem; letter-spacing: .02em; }
.marca b { color: var(--naranja); }
.barra nav { margin-left: auto; display: flex; gap: .25rem; flex-wrap: wrap; }
.barra nav a { color: #d7e2f0; text-decoration: none; padding: .4rem .7rem; border-radius: 6px; }
.barra nav a:hover, .barra nav a.act { background: rgba(255,255,255,.12); color: #fff; }
.barra nav a.salir { color: #ffc98a; }
.hamb { display: none; margin-left: auto; background: none; border: 0; color: #fff; font-size: 1.4rem; cursor: pointer; }
@media (max-width: 760px) {
  .hamb { display: block; }
  .barra { flex-wrap: wrap; }
  .barra nav { display: none; width: 100%; flex-direction: column; }
  .menu-abierto .barra nav { display: flex; }
}
.empresa-actual { display: flex; align-items: center; gap: .6rem; padding: .5rem 1rem; background: #fff; border-bottom: 1px solid var(--linea); font-weight: 600; }
.empresa-actual img { height: 28px; max-width: 90px; object-fit: contain; }
.empresa-actual .cambiar { margin-left: auto; font-weight: 400; font-size: .9rem; }

.contenido { width: 100%; max-width: 1100px; margin: 0 auto; padding: 1.25rem 1rem 3rem; flex: 1; }
.pie { text-align: center; color: var(--suave); font-size: .8rem; padding: 1rem; }

.caja { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1.1rem 1.2rem; margin-bottom: 1rem; }
.fila { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-start; }
.fila > * { flex: 1 1 260px; }
.encab { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.encab h1 { margin: 0; }
.encab .acciones { margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; }

.aviso { padding: .7rem 1rem; border-radius: 8px; margin-bottom: 1rem; border: 1px solid; }
.aviso.ok { background: #e7f6ef; border-color: #b5e2cd; color: #0c5a40; }
.aviso.error { background: #fdecea; border-color: #f5c2bc; color: #8a2419; }
.aviso.info { background: #eaf2fb; border-color: #c3d8f0; color: #174a7c; }

.btn { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid var(--azul2); background: var(--azul2); color: #fff; padding: .5rem .9rem; border-radius: 8px; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn:hover { filter: brightness(1.1); }
.btn.sec { background: #fff; color: var(--azul2); }
.btn.naranja { background: var(--naranja); border-color: var(--naranja); }
.btn.rojo { background: #fff; color: var(--rojo); border-color: var(--rojo); }
.btn.verde { background: var(--verde); border-color: var(--verde); }
.btn.peq { padding: .3rem .6rem; font-size: .85rem; }
form.inline { display: inline; }

label { display: block; font-weight: 600; font-size: .88rem; margin: .7rem 0 .25rem; }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=number], input[type=search], input[type=url], select, textarea {
  width: 100%; padding: .55rem .65rem; border: 1px solid #c7cfd9; border-radius: 7px; font: inherit; background: #fff; color: inherit;
}
input:focus, select:focus, textarea:focus { outline: 2px solid #9cc2ec; border-color: var(--azul2); }
input[type=color] { width: 56px; height: 38px; padding: 2px; border: 1px solid #c7cfd9; border-radius: 7px; background: #fff; }
.ayuda { color: var(--suave); font-size: .82rem; margin-top: .2rem; }
.rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 1rem; }

table.lista { width: 100%; border-collapse: collapse; background: #fff; }
.lista th, .lista td { text-align: left; padding: .6rem .6rem; border-bottom: 1px solid var(--linea); vertical-align: middle; }
.lista th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--suave); background: #f8fafc; }
.lista tr:hover td { background: #fafcff; }
.tabla-env { overflow-x: auto; border: 1px solid var(--linea); border-radius: var(--radio); }
.lista td .sub { color: var(--suave); font-size: .82rem; }
@media (max-width: 640px) { .lista .ocultar-m { display: none; } }

.pill { display: inline-block; padding: .1rem .55rem; border-radius: 99px; font-size: .78rem; font-weight: 700; font-style: normal; }
.pill.verde { background: #dff3ea; color: var(--verde); }
.pill.ambar { background: #fdf0d9; color: var(--ambar); }
.pill.rojo { background: #fbe3e0; color: var(--rojo); }
.pill.gris { background: #eceff3; color: var(--gris); }

.avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: #dbe4ef; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: var(--azul2); flex: none; }
.avatar-g { width: 150px; height: 200px; border-radius: 10px; object-fit: cover; background: #dbe4ef; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; font-weight: 700; color: var(--azul2); }
.persona-celda { display: flex; align-items: center; gap: .6rem; }

.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.cifra { background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); padding: .9rem 1rem; text-decoration: none; color: inherit; }
.cifra b { display: block; font-size: 1.8rem; line-height: 1.1; }
.cifra span { color: var(--suave); font-size: .85rem; }
.cifra.verde b { color: var(--verde); } .cifra.ambar b { color: var(--ambar); } .cifra.rojo b { color: var(--rojo); }

.filtros { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .8rem; }
.filtros input[type=search] { flex: 1 1 220px; width: auto; }
.filtros select { width: auto; }

.datos { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 0; }
.datos dt { color: var(--suave); font-size: .88rem; }
.datos dd { margin: 0; font-weight: 600; }
.enlace-copiar { display: flex; gap: .4rem; }
.enlace-copiar input { font-size: .85rem; }
.codigo { font-family: ui-monospace, Consolas, monospace; letter-spacing: .08em; font-weight: 700; }
.muestra-color { display: flex; gap: .75rem; align-items: center; }

.login { max-width: 380px; margin: 8vh auto; }
.login .caja { padding: 1.6rem; }
.qr-mini { width: 120px; height: 120px; }
.vacio { text-align: center; color: var(--suave); padding: 2rem 1rem; }
.paginas { display: flex; gap: .3rem; margin-top: .8rem; flex-wrap: wrap; }
.paginas a, .paginas span { padding: .3rem .65rem; border: 1px solid var(--linea); border-radius: 6px; background: #fff; text-decoration: none; }
.paginas span { background: var(--azul2); color: #fff; }