/* Estilos de la facturación, sacados del diseño aprobado (diseno/*.dc.html). */
:root{
  --acento:#13297A; --acento2:#3B8FD6; --tinta:#0F1E2C; --tinta2:#39444B; --gris:#5B6B78; --gris2:#8A97A1;
  --fondo:#F4F6F8; --tarjeta:#FFFFFF; --linea:#E2E7EC; --borde:#D5DDE3; --celeste:#EEF4FC; --celeste2:#EAF2FC;
  --ok:#1E7B4B; --okfondo:#E4F4EB; --no:#B3261E; --nofondo:#FCEBEA; --aviso:#8A5A00; --avisofondo:#FFF4D6;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fondo);color:var(--tinta);font:15px/1.45 'Plus Jakarta Sans',system-ui,-apple-system,sans-serif}
a{color:var(--acento)}a:hover{color:var(--acento2)}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{margin:0}
.oculto{display:none!important}
.sr{position:absolute;left:-9999px}

/* Campos */
.campo{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:700;color:var(--tinta2);min-width:0}
.campo input,.campo select,.campo textarea{font-size:15px;font-weight:600;color:var(--tinta);padding:11px 12px;border:1.5px solid var(--borde);
  border-radius:12px;background:#fff;outline:none;width:100%;min-width:0}
.campo textarea{font-weight:500;resize:vertical}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--acento2)}
.campo input::placeholder{color:var(--gris2);font-weight:500}
.campo small{font-weight:500;color:var(--gris)}

/* Botones */
.boton{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:14px;padding:13px 20px;font-weight:700;
  font-size:15px;background:var(--acento);color:#fff;text-decoration:none;cursor:pointer;white-space:nowrap}
.boton:hover{color:#fff;filter:brightness(1.08)}
.boton.claro{background:#fff;color:var(--tinta);border:1.5px solid var(--borde);padding:11.5px 18px}
.boton.claro:hover{color:var(--acento);border-color:var(--acento2)}
.boton.azul{background:var(--acento2)}
.boton.peligro{background:#fff;color:var(--no);border:1.5px solid #E7B4B0}
.boton[disabled],.boton.apagado{opacity:.5;cursor:not-allowed;filter:none}
.boton.chico{padding:8px 13px;font-size:13.5px;border-radius:11px}
.pastilla{font-size:14px;font-weight:600;border:1.5px solid var(--borde);border-radius:999px;padding:8px 15px;background:#fff;color:var(--tinta2);cursor:pointer}
.pastilla.activa{background:var(--acento);color:#fff;border-color:var(--acento);font-weight:700}
.pastilla[disabled]{opacity:.45;cursor:not-allowed}

/* Mensajes */
.mensaje{border-radius:12px;padding:11px 14px;font-size:14px;line-height:1.4}
.mensaje.error{background:var(--nofondo);color:var(--no)}
.mensaje.ok{background:var(--okfondo);color:var(--ok)}
.mensaje.aviso{background:var(--avisofondo);color:var(--aviso)}
.etiqueta{display:inline-block;font-size:12.5px;font-weight:700;border-radius:999px;padding:4px 10px;background:var(--celeste);color:var(--acento)}
.etiqueta.ok{background:var(--okfondo);color:var(--ok)}
.etiqueta.no{background:var(--nofondo);color:var(--no)}
.etiqueta.aviso{background:var(--avisofondo);color:var(--aviso)}
.franja-prueba{background:#FFF4D6;color:#7A4E00;text-align:center;font-size:13px;font-weight:700;padding:7px 16px}

/* Encabezado de la app */
.cabecera{min-height:76px;background:#fff;border-bottom:1px solid var(--linea);padding:12px 40px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.cabecera .logo{height:34px;width:auto;display:block}
.cabecera .ir-inicio{display:block;flex:none}
/* Menú fijo bajo el encabezado */
.menu{background:#fff;border-bottom:1px solid var(--linea);padding:0 40px;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;
  position:sticky;top:0;z-index:5}
.menu::-webkit-scrollbar{display:none}
.menu a{flex:none;padding:12px 14px;font-size:14px;font-weight:600;color:var(--tinta2);text-decoration:none;border-bottom:3px solid transparent;white-space:nowrap}
.menu a:hover{color:var(--acento)}
.menu a.aqui{color:var(--acento);border-bottom-color:var(--acento);font-weight:800}
.cabecera h1{font-size:20px;font-weight:800;flex:1}
.cabecera .buscar{flex:1;min-width:200px;display:flex;align-items:center;gap:10px;background:var(--fondo);border-radius:12px;padding:0 14px;height:44px;color:var(--gris)}
.cabecera .buscar input{border:0;background:transparent;flex:1;outline:none;font-size:14px;min-width:0}
.yo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--tinta)}
.yo .avatar{width:40px;height:40px;border-radius:50%;background:var(--acento);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;flex:none}
.yo b{font-size:14px;display:block;line-height:1.2}.yo span.rol{font-size:12px;color:var(--gris)}
.salir{font-size:13px;font-weight:600;color:var(--gris);text-decoration:none}
.contenido{padding:28px 40px 48px;max-width:1360px;margin:0 auto}
.tarjeta{background:#fff;border-radius:18px;padding:22px 24px}
.tarjeta h2{font-size:17px;font-weight:800}

@media (max-width:760px){
  .cabecera{padding:12px 16px;gap:12px}
  .cabecera .logo{height:28px}
  .cabecera:has(h1) .ir-inicio{display:none}      /* en el teléfono, con título, el Inicio está en el menú */
  .cabecera h1{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .menu{padding:0 8px}
  .menu a{padding:11px 10px;font-size:13.5px}
  .cabecera h1{font-size:18px}
  .cabecera .buscar{order:5;flex-basis:100%}
  .yo .nombre{display:none}
  .contenido{padding:18px 16px 40px}
  .tarjeta{padding:18px 16px}
}