* { box-sizing: border-box; }
body { font-family: system-ui, sans-serif; margin: 0; background: #f4f5f7; color: #1d2330; line-height: 1.45; }
main { max-width: 64rem; margin: 1.5rem auto 3rem; padding: 0 1rem; }
h1 { font-size: 1.5rem; margin: 0 0 1rem; }
h2 { font-size: 1.15rem; margin: 1.5rem 0 .5rem; }
a { color: #0b4f9c; }
.tarjeta { background: #fff; border-radius: 8px; padding: 1.25rem; box-shadow: 0 1px 3px rgba(0,0,0,.12); margin-bottom: 1rem; }
.estrecha { max-width: 28rem; margin: 3rem auto; }
label { display: block; margin-top: 1rem; font-weight: 600; }
label.mantener { font-weight: 400; }
input { width: 100%; padding: .5rem; margin-top: .25rem; font-size: 1rem; }
button { margin-top: 1.25rem; padding: .6rem 1.2rem; font-size: 1rem; cursor: pointer; }
[hidden] { display: none !important; }
.campo-password { display: flex; gap: .5rem; margin-top: .25rem; }
.campo-password input { flex: 1; min-width: 0; margin-top: 0; }
.ojo { margin-top: 0; padding: 0 .6rem; display: flex; align-items: center; justify-content: center;
       background: #fff; color: #1d2330; border: 1px solid #767676; border-radius: 4px; }
.ojo:focus-visible { outline: 2px solid #1d2330; outline-offset: 2px; }
.ojo[aria-pressed="false"] .icono-ocultar, .ojo[aria-pressed="true"] .icono-ver { display: none; }
.error { color: #b00020; margin: 1rem 0 0; }
dl { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1rem; }
dt { color: #5b6270; }
dd { margin: 0; font-weight: 600; }

/* Menu comun */
.cabecera { background: #1d2330; color: #fff; }
.cabecera-interior { max-width: 64rem; margin: 0 auto; padding: .5rem 1rem; }
.quien { font-size: .9rem; color: #c9ced8; margin: 0 0 .25rem; }
.menu { display: flex; flex-wrap: wrap; gap: .25rem; align-items: center; }
.menu a, .menu button { color: #fff; text-decoration: none; padding: .6rem .8rem; border-radius: 6px;
                        font-size: 1rem; min-height: 2.75rem; display: inline-flex; align-items: center; }
.menu a:hover, .menu button:hover { background: #38415a; }
.menu a[aria-current="page"] { background: #fff; color: #1d2330; font-weight: 600; }
.menu form { margin: 0 0 0 auto; }
.menu button { margin: 0; background: transparent; border: 1px solid #8791a8; }
.menu a:focus-visible, .menu button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Tablas: en el movil se desplazan en horizontal dentro de su caja */
.tabla-scroll { overflow-x: auto; background: #fff; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
table { border-collapse: collapse; width: 100%; min-width: 34rem; }
th, td { padding: .6rem .75rem; text-align: left; border-bottom: 1px solid #e3e6ec; vertical-align: top; }
th { background: #eef0f4; font-size: .9rem; white-space: nowrap; }
td.num, th.num { text-align: right; white-space: nowrap; }
tr.apagada td { color: #6b7280; }
.vacio, .aviso { background: #fff; border-radius: 8px; padding: 1rem; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.aviso { border-left: 4px solid #b26a00; }
.exito { background: #fff; border-radius: 8px; padding: 1rem; box-shadow: 0 1px 3px rgba(0,0,0,.12); border-left: 4px solid #0b5a23; }
details summary { cursor: pointer; color: #0b4f9c; padding: .3rem 0; }
.accion { min-width: 14rem; }
.accion label { margin-top: .5rem; font-weight: 600; }
.enlace-accion { margin: 0 0 .25rem; }
.nota { color: #5b6270; font-size: .9rem; margin: .25rem 0 0; }
form.tarjeta select { width: 100%; padding: .5rem; margin-top: .25rem; font: inherit; }
form.tarjeta textarea { width: 100%; padding: .5rem; margin-top: .25rem; font: inherit; }
.accion select { width: 100%; padding: .5rem; margin-top: .25rem; font: inherit; }
.accion textarea { width: 100%; padding: .5rem; margin-top: .25rem; font: inherit; }
.accion button { margin-top: .5rem; }
.selector-fecha { display: flex; flex-wrap: wrap; gap: .5rem; align-items: end; }
.selector-fecha label { margin: 0; }
.selector-fecha input { width: auto; margin: 0; }
.selector-fecha button { margin: 0; }
.vecinos { display: flex; justify-content: space-between; gap: 1rem; margin: .75rem 0; }
.vecinos a { padding: .5rem 0; }
.etq { display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: .85rem; font-weight: 600; }
.etq-ok { background: #d9f2e0; color: #0b5a23; }
.etq-degradado { background: #fdebc8; color: #7a4a00; }
.etq-caido { background: #fbd5d9; color: #8a0f1f; }
.etq-neutra { background: #e3e6ec; color: #2c3447; }
.clientes details.tarjeta > summary { font-weight: 600; font-size: 1.1rem; color: #1d2330; }
.clientes h4 { margin: 1.25rem 0 .4rem; font-size: 1rem; }
.clientes .tabla-scroll { box-shadow: none; border: 1px solid #e3e6ec; }
.clientes table { min-width: 28rem; }
.futuro { color: #7a4a00; font-size: .85rem; font-weight: 600; }
.aviso-fijo { border-left-color: #b00020; font-weight: 600; }
.series { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; }
.series .tarjeta { margin: 0; }
.series h3 { margin: 0 0 .5rem; font-size: 1.05rem; }
.series p { margin: .2rem 0; }

/* Zona del chofer: movil primero, botones grandes */
.chofer-inicio { max-width: 28rem; margin: 1rem auto; }
.boton-grande { display: flex; align-items: center; justify-content: center; min-height: 6rem; margin: 0 0 1rem;
                background: #0b4f9c; color: #fff; text-decoration: none; font-size: 1.6rem; font-weight: 700;
                letter-spacing: .05em; border-radius: 12px; }
.boton-grande:focus-visible { outline: 3px solid #1d2330; outline-offset: 3px; }
.secundarios { display: flex; gap: .75rem; margin-top: 1.5rem; }
.secundarios a, .secundarios button { flex: 1; margin: 0; min-height: 3rem; display: flex; align-items: center;
                justify-content: center; text-align: center; font-size: 1rem; background: #fff; color: #1d2330;
                border: 1px solid #767676; border-radius: 8px; text-decoration: none; }
.secundarios form { flex: 1; margin: 0; display: flex; }
.secundarios form button { width: 100%; }
.camion { margin: 0 0 1.5rem; }
.camion select { width: 100%; padding: .75rem; font-size: 1.1rem; margin-top: .25rem; }
.camion button { width: 100%; min-height: 3rem; }

/* Envio de partes y vales (tarea 29) */
.envio fieldset { border: 1px solid #767676; border-radius: 8px; margin: 0 0 1rem; padding: .5rem .75rem; }
.envio fieldset label { display: flex; align-items: center; gap: .6rem; min-height: 3rem; font-size: 1.1rem; }
.envio select { width: 100%; padding: .75rem; font-size: 1.05rem; margin: .25rem 0 1rem; }
.envio .vista { display: block; max-width: 100%; max-height: 20rem; margin: .5rem auto; border-radius: 8px; }
.envio progress { width: 100%; height: 1.25rem; margin: .5rem 0; }
.envio button { width: 100%; min-height: 3.5rem; font-size: 1.15rem; margin: 0 0 .75rem; }
.envio .estado { min-height: 1.5rem; font-weight: 600; }
.envio .estado.ok { color: #14663a; }
.envio .estado.fallo { color: #b00020; }
.solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.envio .boton-grande { min-height: 4.5rem; font-size: 1.3rem; cursor: pointer; }
.envio .boton-grande:focus-within { outline: 3px solid #1d2330; outline-offset: 3px; }
.envio input[type="text"], .envio input[type="url"] { width: 100%; padding: .75rem; font-size: 1.05rem; margin: .25rem 0 .75rem; box-sizing: border-box; }
.deca-tarjeta { border: 1px solid #767676; border-radius: 8px; margin: 0 0 1rem; padding: .75rem; }
.deca-titulo { font-size: 1.1rem; margin: 0 0 .5rem; }
.deca-lista { list-style: none; margin: 0 0 1rem; padding: 0; }
.deca-item { border: 1px solid #767676; border-radius: 8px; margin: 0 0 .5rem; padding: .5rem .75rem; }
.deca-nombre { display: block; font-weight: 600; overflow-wrap: anywhere; }
.deca-estado { display: block; font-size: .95rem; }
.deca-enviado .deca-estado, .deca-duplicado .deca-estado { color: #14663a; }
.deca-error .deca-estado { color: #b00020; }
.envio .deca-quitar { min-height: 2.75rem; font-size: 1rem; margin: .5rem 0 0; }

/* Listas del chofer (tarea 31) */
.lista-envios { list-style: none; padding: 0; margin: 0 0 1rem; }
.lista-envios li { background: #fff; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,.12); padding: .75rem 1rem; margin-bottom: .6rem; line-height: 1.5; }
.fotos-detalle { list-style: none; padding: 0; margin: 0 0 1rem; }
.fotos-detalle li { margin-bottom: .75rem; }
.fotos-detalle img { display: block; width: 100%; height: auto; border-radius: 8px; background: #e3e6ec; }

/* Marca (insignia) */
.logo-login { display: block; width: 128px; height: auto; margin: 0 auto 1rem; }

/* ==== Diseno base azul (tarea de diseno, parte 1): solo login y zona del chofer ====
   Las clases nuevas (.btn, .card, .campo, .volver, .chip, .dialogo) no existian antes; el panel no las usa. */
:root {
  --azul: #1F6FB2;          /* botones y enlaces; blanco encima = contraste 4,5:1 o mas */
  --azul-oscuro: #124A7A;   /* texto sobre fondos tintados y foco */
  --texto: #12263A;
  --texto-2: #3F5A73;
  --fondo: #F4F8FC;
  --borde: #A8C3DA;
  --tinte: #E6F1FB;
  --error: #B3261E;
  --aviso: #7A4A00;
  --radio: 12px;
}
body.azul { background: var(--fondo); color: var(--texto); }
body.azul main { max-width: 30rem; }
body.azul a { color: var(--azul); }
body.azul h1 { color: var(--texto); }
body.azul .error { color: var(--error); }
body.azul .nota { color: var(--texto-2); }

.card { background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.25rem; margin: 0 0 1rem; }
.card h1, .card h2 { margin-top: 0; }
.card-estrecha { max-width: 28rem; margin: 2rem auto; }
.card-etiqueta { margin: 0; color: var(--texto-2); font-size: .95rem; }
.card-valor { margin: .1rem 0 .75rem; font-size: 1.6rem; font-weight: 700; color: var(--texto); }

.campo { margin: 0 0 1rem; }
.campo label { display: block; margin: 0 0 .3rem; font-weight: 600; color: var(--texto); }
.campo input, .campo select { width: 100%; min-height: 48px; padding: .6rem .75rem; font: inherit; color: var(--texto);
                              background: #fff; border: 1px solid var(--borde); border-radius: 10px; margin: 0; }
.campo .campo-password { margin-top: 0; }
.campo .campo-password input { flex: 1; }
.campo-casilla { display: flex; align-items: center; gap: .6rem; min-height: 44px; margin: 0 0 1rem; font-weight: 400; }
.campo-casilla input { width: 1.4rem; height: 1.4rem; margin: 0; flex: none; }

.btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; margin: 0 0 .75rem;
       padding: .6rem 1.2rem; font: inherit; font-weight: 700; text-align: center; text-decoration: none; cursor: pointer;
       color: #fff; background: var(--azul); border: 2px solid var(--azul); border-radius: var(--radio); }
body.azul a.btn { color: #fff; }
.btn:hover { background: var(--azul-oscuro); border-color: var(--azul-oscuro); }
.btn-sec, body.azul a.btn-sec { color: var(--azul-oscuro); background: #fff; border-color: var(--azul); }
.btn-sec:hover { background: var(--tinte); border-color: var(--azul); }
.btn-grande { min-height: 5rem; font-size: 1.35rem; }
details > summary.btn { list-style: none; padding: .6rem 1.2rem; }
details > summary.btn::-webkit-details-marker { display: none; }
.btn:focus-visible, .campo input:focus-visible, .campo select:focus-visible,
body.azul a:focus-visible, summary.btn:focus-visible { outline: 3px solid var(--azul-oscuro); outline-offset: 3px; }

.desplegado { margin-top: .75rem; }
.chip { display: inline-block; padding: .15rem .7rem; border-radius: 999px; font-size: .9rem; font-weight: 600;
        background: var(--tinte); color: var(--azul-oscuro); border: 1px solid var(--borde); }
.chip-error { background: #fbe9e7; color: var(--error); border-color: var(--error); }
.chip-aviso { background: #fdf3dc; color: var(--aviso); border-color: var(--aviso); }

.dialogo { max-width: 24rem; width: calc(100% - 2rem); padding: 1.25rem; color: var(--texto); background: #fff;
           border: 1px solid var(--borde); border-radius: var(--radio); }
.dialogo::backdrop { background: rgba(18, 38, 58, .55); }
.dialogo h2 { margin: 0 0 .5rem; }
.dialogo p { margin: 0 0 1.25rem; }
.dialogo-botones { display: grid; gap: .5rem; }
.dialogo-botones .btn { margin: 0; }

/* Fila de dos botones (paginacion de las listas del chofer) */
.fila-botones { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin: 0 0 1rem; }
.fila-botones .btn { margin: 0; }
body.azul .filtro-tipos { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin: 0 0 1rem; }
body.azul .filtro-tipos .btn { width: 100%; margin: 0; }

/* ==== Diseno base azul, parte 2: pantallas de envio, listas y detalle. Todo dentro de body.azul ==== */
:root { --foco: #124A7A; }
body.azul .chofer-inicio { overflow-wrap: anywhere; }
body.azul .card.envio { padding: 1rem; }
body.azul .envio fieldset { border: 1px solid var(--borde); border-radius: 10px; margin: 0 0 1rem; padding: .5rem .75rem; }
body.azul .envio fieldset legend { font-weight: 600; padding: 0 .3rem; }
body.azul .envio fieldset label { display: flex; align-items: center; gap: .6rem; min-height: 48px; margin: 0; font-weight: 400; font-size: 1.05rem; }
body.azul .envio fieldset input { width: 1.4rem; height: 1.4rem; margin: 0; flex: none; }
body.azul .envio .campo select, body.azul .envio .campo input { margin: 0; }
body.azul .envio .btn { width: 100%; margin: 0 0 .75rem; font-size: 1.05rem; }
body.azul .envio label.btn { cursor: pointer; }
body.azul .envio label.btn.btn-grande { min-height: 4.5rem; font-size: 1.25rem; }
body.azul .envio label.btn:focus-within, body.azul .envio label.btn:has(+ input:focus-visible),
body.azul .envio input.solo-lectores:focus-visible + label { outline: 3px solid var(--foco); outline-offset: 3px; }
body.azul .envio .vista { border-radius: 10px; border: 1px solid var(--borde); }
body.azul .envio progress { accent-color: var(--azul); }
body.azul .envio .estado.ok { color: #14663a; }
body.azul .envio .estado.fallo { color: var(--error); }
body.azul .deca-tarjeta { background: #fff; border: 1px solid var(--borde); border-radius: 12px; }
body.azul .deca-item { background: var(--tinte); border: 1px solid var(--borde); border-radius: 10px; }
body.azul .deca-error { border-color: var(--error); }
body.azul .envio .deca-quitar { width: 100%; min-height: 44px; }
body.azul .lista-envios { list-style: none; margin: 0 0 1rem; padding: 0; }
body.azul .lista-envios li.card { box-shadow: none; line-height: 1.45; }
body.azul .envio-titulo { margin: 0 0 .25rem; }
body.azul .envio-detalle { margin: 0 0 .5rem; color: var(--texto-2); }
body.azul .paginas { text-align: center; }
body.azul .fotos-detalle img { border: 1px solid var(--borde); }
body.azul .card ul { padding-left: 1.2rem; }
body.azul .card h2 { font-size: 1.1rem; margin-top: 1.25rem; }
body.azul .card h2:first-of-type { margin-top: 0; }
body.azul .btn:focus-visible, body.azul .btn-cab:focus-visible { outline-color: var(--foco); }

/* ==== Cabecera de la zona del chofer (todo dentro de body.azul) ==== */
body.azul .cab-chofer { display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  margin: -1.5rem -1rem 1rem; padding: .5rem 1rem; background: #fff; border-bottom: 1px solid var(--borde); }
body.azul .logo-cab { display: block; width: 42px; height: auto; flex: none; }
body.azul .btn-cab { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 1.1rem;
  border: 2px solid var(--azul); border-radius: 999px; background: #fff; color: var(--azul-oscuro);
  font-weight: 600; font-size: 1rem; text-decoration: none; white-space: nowrap; }
body.azul .btn-cab:hover { background: var(--tinte); }
/* Con dos botones (Volver e Inicio), el logo se oculta si no cabe: nunca se solapan ni se cortan. */
@media (max-width: 400px) { body.azul .cab-dos .logo-cab { display: none; } }

/* ==== Diseno azul del panel de oficina, fase 1 (todo dentro de body.oficina; el chofer usa body.azul) ==== */
body.oficina { background: var(--fondo); color: var(--texto); }
body.oficina main { max-width: 64rem; }
body.oficina h1, body.oficina h2 { color: var(--texto); }
body.oficina a { color: var(--azul); }
body.oficina a.btn { color: #fff; }
body.oficina a.btn-sec { color: var(--azul-oscuro); }
body.oficina .nota { color: var(--texto-2); }
body.oficina dt { color: var(--texto-2); }
body.oficina .error { color: var(--error); }
body.oficina a:focus-visible, body.oficina summary:focus-visible, body.oficina .btn:focus-visible,
body.oficina button:focus-visible, body.oficina input:focus-visible, body.oficina select:focus-visible,
body.oficina textarea:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }

/* Cabecera */
body.oficina .cabecera { background: #fff; color: var(--texto); border-bottom: 3px solid var(--azul); }
body.oficina .cabecera-interior { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .25rem 1rem; padding: .5rem 1rem; }
body.oficina .marca { grid-area: 1 / 1; display: flex; align-items: center; gap: .75rem; }
body.oficina .cabecera-interior > form { grid-area: 1 / 2; margin: 0; }
body.oficina .cabecera .menu { grid-column: 1 / -1; }
body.oficina .logo-oficina { display: block; width: 42px; height: auto; flex: none; }
body.oficina .quien { margin: 0; font-size: .95rem; color: var(--texto-2); }
body.oficina .menu { flex: 1 1 auto; gap: .25rem; }
body.oficina .menu a { color: var(--azul-oscuro); border-radius: 8px; padding: .5rem .75rem; min-height: 44px; }
body.oficina .menu a:hover { background: var(--tinte); }
body.oficina .menu a[aria-current="page"] { background: var(--azul); color: #fff; font-weight: 700; }
body.oficina .cabecera-interior > form button { margin: 0; min-height: 44px; padding: .5rem 1rem; color: var(--azul-oscuro); background: #fff;
                            border: 2px solid var(--azul); border-radius: 8px; font-weight: 700; }
body.oficina .cabecera-interior > form button:hover { background: var(--tinte); }

/* Botones, campos y tarjetas */
body.oficina .btn { display: inline-flex; width: auto; margin: 0; min-height: 44px; padding: .45rem 1rem; }
body.oficina button { margin-top: 0; }
body.oficina .tarjeta, body.oficina .card, body.oficina .vacio, body.oficina .aviso, body.oficina .exito {
  background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: none; }
body.oficina .card { padding: 1rem 1.25rem; }
body.oficina .aviso { border-left: 6px solid var(--aviso); color: var(--texto); }
body.oficina .exito { border-left: 6px solid #14663a; }
body.oficina .aviso-fijo { border-left-color: var(--error); }
body.oficina .vacio { padding: 1rem; }
body.oficina input:not([type="checkbox"]):not([type="radio"]), body.oficina select, body.oficina textarea {
  font: inherit; color: var(--texto); background: #fff; border: 1px solid var(--borde); border-radius: 10px; }
body.oficina select, body.oficina input:not([type="checkbox"]):not([type="radio"]) { min-height: 44px; }
body.oficina textarea { width: 100%; padding: .5rem; }
body.oficina details.accion { background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); padding: .5rem 1.25rem; margin: 0 0 .75rem; }
body.oficina details > summary { color: var(--azul-oscuro); font-weight: 600; }

/* Tablas */
body.oficina .tabla-scroll { background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: none; }
body.oficina th { background: var(--tinte); color: var(--azul-oscuro); }
body.oficina th, body.oficina td { border-bottom-color: var(--borde); }
body.oficina tbody tr:last-child td { border-bottom: 0; }

/* Estados y filtros */
body.oficina .etq-neutra { background: var(--tinte); color: var(--azul-oscuro); border: 1px solid var(--borde); }
body.oficina .filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem 1rem; }
body.oficina .filtros .campo { margin: 0; flex: 1 1 11rem; }
body.oficina .filtros-botones { display: flex; flex-wrap: wrap; gap: .5rem; }
body.oficina .paginas { display: flex; gap: 1rem; justify-content: center; }
body.oficina .fotos-detalle img { border: 1px solid var(--borde); max-width: 32rem; }

/* ==== Panel de oficina, fase 2: En revision y Partes del dia; botones compactos dentro de las tablas ==== */
body.oficina .etq-aviso { background: #fdf3dc; color: var(--aviso); border: 1px solid var(--aviso); }
body.oficina .selector-fecha { align-items: flex-end; gap: .75rem; }
body.oficina .selector-fecha label { display: flex; align-items: center; min-height: 44px; margin: 0; font-weight: 600; }
body.oficina .vecinos { align-items: center; }
body.oficina td.acciones { min-width: 14rem; }
body.oficina .acciones-caja { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .4rem; max-width: 21rem; }
body.oficina .acciones-caja > * { margin: 0; }
body.oficina .acciones-caja details[open] { flex: 1 1 100%; order: 2; }
body.oficina td .enlace-accion { margin: 0; }
body.oficina td details { margin: 0; }
body.oficina td .btn, body.oficina td .enlace-accion a, body.oficina td summary, body.oficina td button {
  display: inline-flex; align-items: center; justify-content: center; width: auto; min-height: 36px; margin: 0;
  padding: .2rem .75rem; font: inherit; font-size: .95rem; font-weight: 700; text-decoration: none; cursor: pointer;
  white-space: nowrap;
  border: 2px solid var(--azul); border-radius: 10px; }
body.oficina td .btn-sec, body.oficina td .enlace-accion a, body.oficina td summary {
  color: var(--azul-oscuro); background: #fff; list-style: none; }
body.oficina td .btn-sec:hover, body.oficina td .enlace-accion a:hover, body.oficina td summary:hover { background: var(--tinte); }
body.oficina td summary::-webkit-details-marker { display: none; }
body.oficina td button { color: #fff; background: var(--azul); margin-top: .5rem; }
body.oficina td button:hover { background: var(--azul-oscuro); border-color: var(--azul-oscuro); }
body.oficina td .accion { min-width: 0; width: 100%; margin-top: .4rem; padding: .6rem; background: var(--tinte);
  border: 1px solid var(--borde); border-radius: 10px; }
body.oficina td .accion label { margin-top: .4rem; font-size: .9rem; }
body.oficina td .accion textarea, body.oficina td .accion select { margin-top: .2rem; }

/* Panel de oficina, fase 2 (ajuste 2): Acciones en cuadricula de 2 columnas desde 1100 px; fija a la derecha por debajo */
@media (min-width: 1100px) {
  body.oficina td.acciones { min-width: 21rem; }
  body.oficina .acciones-caja { display: grid; grid-template-columns: max-content max-content; gap: .4rem; }
  body.oficina .acciones-caja details[open] { grid-column: 1 / -1; }
}
@media (max-width: 1099.98px) {
  body.oficina th.acciones, body.oficina td.acciones { position: sticky; right: 0; z-index: 1; background: #fff;
    box-shadow: -6px 0 6px -6px rgba(18, 38, 58, .35); }
  body.oficina th.acciones { background: var(--tinte); }
}

/* Panel de oficina, fase 3: resto de pantallas (albaranes, clientes, servicio, usuarios, privacidad, corregir, errores) */
body.oficina main { overflow-wrap: break-word; }
body.oficina .btn-form { margin-top: 1rem; }
body.oficina .formulario, body.oficina .tarjeta > form { max-width: 36rem; }
body.oficina dl.card { margin: 0 0 1rem; }
body.oficina code { padding: .1rem .4rem; font-size: 1.05rem; background: var(--tinte); border: 1px solid var(--borde); border-radius: 6px; }
body.oficina .vista-previa { padding: 1rem; margin: 0 0 1rem; background: var(--tinte); border: 1px solid var(--borde); border-radius: var(--radio); }
body.oficina .vista-previa p { margin: .25rem 0; }
body.oficina .estrecha { margin: 2rem auto; }
body.oficina .series h3 { color: var(--azul-oscuro); }
body.oficina .clientes details.tarjeta > summary { color: var(--azul-oscuro); }
body.oficina .clientes .tabla-scroll { border-color: var(--borde); }
body.oficina .clientes h4 { color: var(--azul-oscuro); }
body.oficina .futuro { color: var(--aviso); }
body.oficina tr.apagada td { color: var(--texto-2); }
body.oficina .etq-ok { background: #e1f4e8; color: #14663a; border: 1px solid #14663a; }
body.oficina .etq-degradado { background: #fdf3dc; color: var(--aviso); border: 1px solid var(--aviso); }
body.oficina .etq-caido { background: #fbe9e7; color: var(--error); border: 1px solid var(--error); }
body.oficina .tarjeta > h1:first-child, body.oficina .tarjeta > h2:first-child, body.oficina .tarjeta > h3:first-child { margin-top: 0; }
body.oficina .tarjeta form select, body.oficina form.tarjeta select { width: 100%; min-height: 44px; }