:root { --fondo:#f6f5f2; --tinta:#222; --suave:#666; --linea:#e4e1da; --acento:#2b2b2b; --ok:#17582b; --okfondo:#e3f3e6; --mal:#8a1c10; --malfondo:#fde4e1; --aviso:#6b4a00; --avisofondo:#fff3d6; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; background:var(--fondo); color:var(--tinta); line-height:1.45; }
.envoltura { max-width: 880px; margin: 0 auto; padding: 20px 16px 48px; }
h1 { font-size: 22px; margin: 0 0 8px; }
h2 { font-size: 17px; margin: 24px 0 8px; }
a { color: inherit; }
.barra { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:12px 16px; margin: -20px -16px 20px; background:#fff; border-bottom:1px solid var(--linea); font-size:14px; }
.tarjeta { background:#fff; border-radius:14px; padding:20px; box-shadow:0 1px 2px rgba(0,0,0,.06); margin-bottom:16px; }
.centrada { max-width: 380px; margin: 8vh auto 0; }
label { display:block; font-size:14px; font-weight:600; margin: 12px 0 4px; }
input[type=text], input[type=password] { width:100%; padding:12px; font-size:16px; border:1px solid #bbb; border-radius:10px; background:#fff; }
button, .boton { display:inline-block; padding:12px 18px; background:var(--acento); color:#fff; border:0; border-radius:10px; font-size:15px; font-weight:600; cursor:pointer; text-decoration:none; }
button.claro { background:#fff; color:var(--tinta); border:1px solid #bbb; padding:8px 12px; font-size:13px; }
.aviso { padding:12px 14px; border-radius:10px; margin-bottom:14px; font-size:14px; }
.aviso.ok { background:var(--okfondo); color:var(--ok); }
.aviso.mal { background:var(--malfondo); color:var(--mal); }
.aviso.nota { background:var(--avisofondo); color:var(--aviso); }
table { width:100%; border-collapse:collapse; font-size:14px; background:#fff; border-radius:10px; overflow:hidden; }
th, td { text-align:left; padding:10px 12px; border-bottom:1px solid var(--linea); vertical-align:top; }
th { background:#efede8; }
.clave { font-family: ui-monospace,Consolas,monospace; font-size:16px; background:#fff; border:1px dashed #999; padding:6px 10px; border-radius:8px; display:inline-block; }
.suave { color: var(--suave); font-size: 13px; }
form.en-linea { display:inline; }
.acciones form { margin: 0 6px 6px 0; display:inline-block; }
.acciones input[type=password] { width: 160px; padding: 7px; font-size: 13px; }
.sin-margen { margin-top: 0; }
.pestanas { display:flex; gap:4px; flex-wrap:wrap; margin: 0 0 16px; border-bottom:1px solid var(--linea); }
.pestanas a { padding:10px 14px; text-decoration:none; color:var(--suave); font-size:14px; border-bottom:2px solid transparent; margin-bottom:-1px; }
.pestanas a.activa { color:var(--tinta); border-bottom-color:var(--acento); font-weight:600; }
.fila-titulo { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.filtros { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
select, input[type=datetime-local], input[type=number], input[type=url], textarea { padding:11px; font-size:15px; border:1px solid #bbb; border-radius:10px; background:#fff; max-width:100%; font-family:inherit; }
.formulario select, .formulario input[type=datetime-local], .formulario input[type=number], .formulario textarea { width:100%; }
.tabla-envoltura { overflow-x:auto; }
.etiqueta { display:inline-block; padding:2px 10px; border-radius:99px; font-size:12px; font-weight:600; background:#eee; }
.e-activo { background:var(--okfondo); color:var(--ok); }
.e-bloqueado { background:var(--malfondo); color:var(--mal); }
.e-borrador { background:#eee; color:#555; }
.e-cerrado { background:#e3e8f3; color:#25427a; }
.interruptor { display:flex; gap:10px; align-items:flex-start; padding:10px 0; border-bottom:1px solid var(--linea); }
.interruptor input { margin-top:4px; width:20px; height:20px; flex:none; }
.interruptor label { margin:0; font-weight:600; }
.interruptor .suave { display:block; font-weight:400; }
.rejilla-topes { display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap:12px; }
progress.barrauso { width:100%; height:10px; border:0; border-radius:99px; overflow:hidden; background:#e7e4dd; appearance:none; -webkit-appearance:none; margin:4px 0 8px; }
progress.barrauso::-webkit-progress-bar { background:#e7e4dd; }
progress.barrauso::-webkit-progress-value { background:var(--acento); }
progress.barrauso::-moz-progress-bar { background:var(--acento); }
.solo-lectura { font-family: ui-monospace,Consolas,monospace; font-size:14px; }
.peligro { background:var(--mal); }
hr { border:0; border-top:1px solid var(--linea); margin:18px 0; }

.fila-tel { display:grid; grid-template-columns: minmax(150px, 40%) 1fr; gap:8px; }
.fila-tel select, .fila-tel input { width:100%; }
.filtros input[type=text] { width:auto; flex:1 1 150px; min-width:0; padding:10px 12px; font-size:15px; }
.filtros select { flex:0 1 auto; }
.enlace-wa { color:#0b6b3a; font-size:13px; text-decoration:none; white-space:nowrap; }
.enlace-wa:hover { text-decoration:underline; }
a.boton.claro { background:#fff; color:var(--tinta); border:1px solid #bbb; padding:8px 12px; font-size:13px; }