/* La app de Durand para sus clientes (m2). Colores de Imagen de marca/tokens.css, ninguno
   inventado. Fondo institucional oscuro; los campos, claros, para leerlos al sol. */

@font-face { font-family: "Open Sans"; font-weight: 400; font-display: swap; src: url(OpenSans-Regular.ttf) format("truetype"); }
@font-face { font-family: "Open Sans"; font-weight: 700; font-display: swap; src: url(OpenSans-Bold.ttf) format("truetype"); }

:root {
  --dt-fondo: #010135;
  --dt-superficie: #0A0A42;
  --dt-borde: #1C1C5E;
  --dt-texto: #F2F2F2;
  --dt-texto-suave: #8A9BA6;
  --dt-accion: #A127F2;
  --dt-violeta-texto: #AC41F4;
  --dt-vivo: #5EF2F2;
  --dt-ok: #2BD98B;
  --dt-aviso: #FFB020;
  --dt-error: #FF5A6E;
  --dt-degradado: linear-gradient(135deg, #5EF2F2 0%, #3351FD 50%, #A127F2 100%);
  --radio: 14px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--dt-fondo);
  color: var(--dt-texto);
  font: 17px/1.5 "Open Sans", system-ui, sans-serif;
  -webkit-text-size-adjust: 100%;
}
.envoltura { max-width: 520px; margin: 0 auto; padding: 0 16px 40px; }
.cinta { background: var(--dt-aviso); color: var(--dt-fondo); font-size: 14px; font-weight: 700;
         text-align: center; padding: 6px 16px; }
.sin-conexion { background: var(--dt-aviso); color: var(--dt-fondo); font-weight: 700; font-size: 15px;
                border-radius: var(--radio); padding: 10px 14px; margin-top: 12px; }
a { color: var(--dt-vivo); }

/* La marca */
.marca { display: flex; align-items: center; gap: 12px; padding: 22px 0 6px; }
.marca::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--dt-degradado); }
.marca img { width: 48px; height: auto; }
.marca span { font-weight: 700; letter-spacing: .14em; font-size: 18px; }
.marca b { display: block; font-size: 11px; letter-spacing: .42em; color: var(--dt-violeta-texto); }
.marca.chica { padding-top: 16px; }
.marca.chica img { width: 36px; }

h1 { font-size: 26px; line-height: 1.2; margin: 18px 0 8px; }
h2 { font-size: 18px; margin: 0 0 6px; }
p { margin: 0 0 12px; }
.suave, .ayuda { color: var(--dt-texto-suave); }
.ayuda { font-size: 15px; margin: 6px 0 0; }
.paso { color: var(--dt-vivo); font-weight: 700; font-size: 14px; letter-spacing: .06em;
        text-transform: uppercase; margin: 14px 0 0; }

/* Formularios: grandes, claros y de dedo */
.caja { display: flex; flex-direction: column; margin: 8px 0 18px; }
label { font-weight: 700; margin: 16px 0 6px; }
label .suave { font-weight: 400; }
input, textarea {
  font: inherit; font-size: 18px; color: #212126; background: #F2F2F2;
  border: 2px solid transparent; border-radius: 10px; padding: 12px 14px; width: 100%;
}
textarea { resize: vertical; }
input:focus, textarea:focus { outline: none; border-color: var(--dt-vivo); }
button, .boton {
  font: inherit; font-weight: 700; font-size: 18px; text-align: center; text-decoration: none;
  display: block; width: 100%; margin-top: 22px; min-height: 52px; padding: 12px 16px;
  border: 0; border-radius: 12px; background: var(--dt-accion); color: #FFFFFF; cursor: pointer;
}
button:focus-visible, .boton:focus-visible, a:focus-visible { outline: 3px solid var(--dt-vivo); outline-offset: 2px; }
.boton.secundario { background: transparent; border: 2px solid var(--dt-borde); color: var(--dt-texto);
                    margin-top: 14px; min-height: 48px; font-size: 16px; }
button.enlace { background: none; color: var(--dt-texto-suave); text-decoration: underline;
                font-weight: 400; font-size: 16px; min-height: 44px; margin-top: 8px; }
.error { background: color-mix(in srgb, var(--dt-error) 16%, var(--dt-superficie));
         border-left: 4px solid var(--dt-error); border-radius: 8px; padding: 10px 14px; font-weight: 700; }
.hecho { background: color-mix(in srgb, var(--dt-ok) 16%, var(--dt-superficie));
         border-left: 4px solid var(--dt-ok); border-radius: 8px; padding: 10px 14px; margin-top: 14px; font-weight: 700; }

/* Inicio */
.estado { display: flex; gap: 14px; align-items: flex-start; border-radius: var(--radio);
          padding: 16px; margin: 14px 0; border: 2px solid; background: var(--dt-superficie); }
.estado p { margin: 0; }
.estado h2 { font-size: 20px; margin-bottom: 4px; }
.ico { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
       font-weight: 700; font-size: 20px; color: var(--dt-fondo); flex: none; }
.estado.ok { border-color: var(--dt-ok); }      .estado.ok .ico { background: var(--dt-ok); }
.estado.aviso { border-color: var(--dt-aviso); } .estado.aviso .ico { background: var(--dt-aviso); }
.estado.error { border-color: var(--dt-error); } .estado.error .ico { background: var(--dt-error); }
.estado.vivo { border-color: var(--dt-vivo); }   .estado.vivo .ico { background: var(--dt-vivo); }
/* m4-bis: el «ya pagué» a medias, en el inicio, y «Estamos leyendo tu comprobante…» */
.estado > div { flex: 1; min-width: 0; }
.estado .boton { margin-top: 12px; }
.ico.girando { animation: latir 1.4s ease-in-out infinite; }
@keyframes latir { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .ico.girando { animation: none; } }
.tarjeta, .pronto { background: var(--dt-superficie); border: 1px solid var(--dt-borde);
                    border-radius: var(--radio); padding: 16px; margin: 14px 0; }
.pronto { border-style: dashed; }
.pronto p { margin: 0; color: var(--dt-texto-suave); }
dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; }
dt { color: var(--dt-texto-suave); }
dd { margin: 0; overflow-wrap: anywhere; }
.actualizado { font-size: 14px; text-align: center; margin-top: 20px; }

/* Elegir servicio */
.opcion { text-align: left; background: var(--dt-superficie); border: 2px solid var(--dt-borde); margin-top: 12px; }
.opcion span { display: block; font-weight: 400; font-size: 15px; color: var(--dt-texto-suave); }

/* m3 · Lo que debe, para pagar y el estado de cuenta */
.estado .bs { font-size: 15px; color: var(--dt-texto-suave); margin: 0 0 4px; }
h3 { font-size: 15px; color: var(--dt-texto-suave); font-weight: 700; margin: 16px 0 6px;
     text-transform: uppercase; letter-spacing: .05em; }
.cuenta { border-top: 1px solid var(--dt-borde); padding-top: 4px; margin-bottom: 8px; }
.cuenta:first-of-type { border-top: 0; }
.cuenta h3 { color: var(--dt-vivo); text-transform: none; letter-spacing: 0; font-size: 16px; }
.cuenta dl { grid-template-columns: 1fr; gap: 2px; }
.cuenta dt { font-size: 14px; margin-top: 8px; }
.cuenta dd { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 18px; }
.copiar { width: auto; flex: none; white-space: nowrap; min-height: 40px; margin: 0; padding: 4px 14px; font-size: 15px;
          background: transparent; border: 1.5px solid var(--dt-accion); color: var(--dt-texto); }
.copiar.listo { border-color: var(--dt-ok); }
.lista { list-style: none; margin: 0; padding: 0; }
.lista li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0;
            border-top: 1px solid var(--dt-borde); }
.lista li:first-child { border-top: 0; }
.lista small { display: block; font-size: 14px; color: var(--dt-texto-suave); }
.monto { text-align: right; font-weight: 700; white-space: nowrap; }
.monto small.ok { color: var(--dt-ok); font-weight: 700; }
.monto small.aviso { color: var(--dt-aviso); font-weight: 700; }

/* m4 · Ya pagué */
.metodos { border: 0; padding: 0; margin: 8px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.metodos legend { font-weight: 700; padding: 0; margin-bottom: 8px; }
.radio { margin: 0; font-weight: 400; display: flex; align-items: center; gap: 10px; min-height: 52px;
         padding: 10px 12px; border: 2px solid var(--dt-borde); border-radius: 12px; background: var(--dt-superficie); }
.radio input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--dt-accion); }
.radio:has(input:checked) { border-color: var(--dt-accion); }
input.archivo { background: var(--dt-superficie); color: var(--dt-texto); border: 2px dashed var(--dt-borde);
                font-size: 16px; padding: 14px 12px; }
input.archivo::file-selector-button { font: inherit; font-weight: 700; color: #FFFFFF; background: var(--dt-accion);
                                      border: 0; border-radius: 8px; padding: 8px 12px; margin-right: 10px; }
select { font: inherit; font-size: 18px; color: #212126; background: #F2F2F2; border: 2px solid transparent;
         border-radius: 10px; padding: 12px 14px; width: 100%; }
select:focus { outline: none; border-color: var(--dt-vivo); }
.leyendo { color: var(--dt-vivo); font-weight: 700; text-align: center; margin-top: 12px; }
.lista small.vivo { color: var(--dt-vivo); }
.lista small.error { color: var(--dt-error); }

/* m6 · El equipo: José, Nathaniell y Juan */
.equipo-nav { display: flex; gap: 5px; margin: 10px 0 0; overflow-x: auto; }
.equipo-nav a { flex: none; padding: 8px 9px; border: 1px solid var(--dt-borde); border-radius: 999px;
                color: var(--dt-texto); text-decoration: none; font-weight: 700; font-size: 14px; }
.cifras { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0; }
.cifra { display: block; background: var(--dt-superficie); border: 1px solid var(--dt-borde); border-radius: var(--radio);
         padding: 12px 14px; color: var(--dt-texto); text-decoration: none; min-height: 44px; }
.cifra b { display: block; font-size: 28px; line-height: 1.1; }
.cifra span { font-size: 14px; color: var(--dt-texto-suave); }
.cifra.aviso { border-color: var(--dt-aviso); }
.cifra.aviso b { color: var(--dt-aviso); }
.pedido { background: var(--dt-superficie); border: 1px solid var(--dt-borde); border-radius: var(--radio);
          padding: 12px 14px; margin: 10px 0; }
.pedido p { margin: 0 0 6px; }
.pedido form { margin: 8px 0 0; }
.pedido-quien small, .ficha small { display: block; font-size: 14px; color: var(--dt-texto-suave); }
.chip { display: inline-block; font-size: 13px; font-weight: 700; padding: 2px 9px; border-radius: 999px;
        border: 1px solid currentColor; margin: 2px 0 2px 4px; white-space: nowrap; }
.chip.ok { color: var(--dt-ok); }
.chip.aviso { color: var(--dt-aviso); }
.chip.error { color: var(--dt-error); }
.chip.vivo { color: var(--dt-vivo); }
.chip.suave { color: var(--dt-texto-suave); }
.lista small.chip { display: inline-block; font-size: 13px; }
.buscar { display: flex; gap: 8px; margin: 12px 0 8px; }
.buscar input { flex: 1; min-width: 0; margin: 0; }
.buscar button { width: auto; margin: 0; padding-inline: 16px; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.filtros { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.filtros::-webkit-scrollbar, .equipo-nav::-webkit-scrollbar { display: none; }
.filtro { flex: none; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--dt-borde);
          color: var(--dt-texto-suave); text-decoration: none; font-size: 14px; font-weight: 700; }
.filtro.activo { color: var(--dt-fondo); background: var(--dt-vivo); border-color: var(--dt-vivo); }
.clientes li { padding: 0; }
.clientes li a { display: flex; justify-content: space-between; gap: 10px; padding: 11px 0; width: 100%;
                 color: var(--dt-texto); text-decoration: none; min-height: 44px; }
.clientes li a > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.derecha { text-align: right; flex: none; max-width: 48%; }
.paginas { display: flex; justify-content: space-between; align-items: center; margin: 14px 0; font-weight: 700; }
details.mas { margin-top: 10px; }
details.mas > summary { cursor: pointer; color: var(--dt-texto-suave); font-weight: 700; min-height: 44px;
                        display: flex; align-items: center; }

/* m5 · El chat y las fallas: lo propio a la derecha, en violeta; lo del otro, a la izquierda. */
.mensajes { list-style: none; margin: 14px 0 4px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.burbuja { max-width: 86%; align-self: flex-start; background: var(--dt-superficie); border: 1px solid var(--dt-borde);
           border-radius: var(--radio) var(--radio) var(--radio) 4px; padding: 8px 12px; }
.burbuja.mia { align-self: flex-end; background: color-mix(in srgb, var(--dt-accion) 22%, var(--dt-superficie));
               border-color: var(--dt-accion); border-radius: var(--radio) var(--radio) 4px var(--radio); }
.burbuja small { display: block; font-size: 13px; color: var(--dt-texto-suave); margin-bottom: 2px; }
.burbuja p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.caja > .radio + .radio { margin-top: 10px; }
.caja .radio span { overflow-wrap: anywhere; }
/* «Transferencia» no se parte en dos a 375 px: en los métodos la palabra va entera (2026-10-29) */
.metodos .radio { padding-inline: 12px; gap: 8px; }
.metodos .radio span { overflow-wrap: normal; min-width: 0; }
.ayuda-durand .boton { margin-top: 14px; }

/* Las notificaciones: el bloque muestra solo lo que corresponde al permiso de este navegador. */
[data-avisos] [data-si] { display: none; }
[data-avisos][data-estado="granted"] [data-si="granted"], [data-avisos][data-estado="default"] [data-si="default"],
[data-avisos][data-estado="denied"] [data-si="denied"], [data-avisos][data-estado="sin_soporte"] [data-si="sin_soporte"] { display: block; }
.si-avisa { color: var(--dt-ok); font-weight: 700; }
.estado.alarma { border-width: 2px; }
.estado.alarma form button { margin-top: 12px; }
h2 .chip { vertical-align: middle; margin-left: 6px; }
.equipo-aqui { margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--dt-borde); }

/* Volver, arriba y grande (Nathaniell, 2026-10-28): siempre a la vista, fácil de tocar. */
.volver { display: inline-flex; align-items: center; gap: 8px; margin: 10px 0 4px; padding: 10px 18px; min-height: 48px;
          border: 2px solid var(--dt-borde); border-radius: 999px; color: var(--dt-texto); text-decoration: none;
          font-weight: 700; font-size: 17px; background: var(--dt-superficie); }
.volver span { font-size: 20px; line-height: 1; }
.mas-abajo { margin: 14px 0 0; text-align: center; }

/* El reporte del mes: barras hechas con la página (sin librerías). */
.barras { list-style: none; margin: 8px 0 0; padding: 0; }
.barra { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: center; padding: 8px 0;
         border-top: 1px solid var(--dt-borde); }
.barra:first-child { border-top: 0; }
.barra-nombre { grid-column: 1 / -1; font-size: 15px; overflow-wrap: anywhere; }
.barra-pista { height: 10px; border-radius: 99px; background: var(--dt-borde); overflow: hidden; }
.barra-pista i, .leyenda i { display: block; height: 100%; width: var(--w); border-radius: 99px; }
.barra b { font-size: 14px; min-width: 2ch; text-align: right; }
i.uno { background: var(--dt-vivo); }
i.dos { background: var(--dt-ok); }
.leyenda { font-size: 14px; color: var(--dt-texto-suave); display: flex; align-items: center; gap: 6px; }
.leyenda i { display: inline-block; width: 14px; height: 10px; }
.cifra b { overflow-wrap: anywhere; }
.lote li { padding: 0; border: 0; }
.lote .radio { width: 100%; margin-top: 8px; }
.franja button { margin-top: 12px; }

/* panel-12 · La pantalla grande (2026-10-28). Hasta 767 px no cambia nada: todo lo de aquí abajo
   vive en media queries. Desde 768 (tablet) y 1100 (computadora) se reparte lo mismo en columnas,
   sin pantallas nuevas. Las columnas son de flujo (como un periódico): cada tarjeta entera en una
   columna, en el mismo orden de importancia que en el celular, y las dos columnas se emparejan. */
@media (min-width: 768px) {
  .envoltura { padding-inline: 24px; }
  /* El inicio del cliente: lo que debe, «Ya pagué» y para pagar a la izquierda; lo demás al lado. */
  body[data-inicio] .envoltura { max-width: 1040px; columns: 2; column-gap: 24px; }
  /* El equipo: ancho de trabajo en todas sus pantallas. */
  .envoltura:has(> .equipo-nav) { max-width: 1200px; }
  .envoltura:has(> .equipo-nav) :is(.caja, .mensajes, .buscar) { max-width: 760px; }
  /* El inicio del equipo y la ficha del cliente: en columnas. */
  .envoltura:has(> .equipo-nav):has(> .cifras),
  .envoltura:has(> .equipo-nav):has(> .volver):has(> .tarjeta dl) { columns: 2; column-gap: 24px; }
  .envoltura > * { break-inside: avoid; }
  .envoltura > :is(header, nav, h1, p, form, .hecho, p.error, .cifras, .volver, .sin-conexion) { column-span: all; }
  .envoltura > .estado:has(+ .boton) { break-after: avoid; }
  .envoltura > .tarjeta, .envoltura > .estado, .envoltura > .pedido { margin-top: 0; }
  .envoltura > .boton { margin: 0 0 14px; }
  .envoltura > :is(.tarjeta, .estado, .pedido, .boton) { display: block; }
  .envoltura > .estado { display: flex; }
  .envoltura > [hidden] { display: none; }        /* lo oculto sigue oculto (el bloque de avisos sin JS) */
  .envoltura > .cifras { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1100px) {
  .equipo-nav a { padding: 8px 14px; }
  /* La lista de clientes, en dos columnas: el doble a la vista sin bajar. */
  .lista.clientes { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }
  .lista.clientes li:nth-child(2) { border-top: 0; }
}
@media (min-width: 1400px) {
  .envoltura:has(> .equipo-nav) { max-width: 1440px; }
  .envoltura:has(> .equipo-nav):has(> .cifras) { columns: 3; }
}

/* panel-13 a 16 · El inicio del cliente, reorganizado (Nathaniell, 2026-10-29). */
:root { --dt-secundario: #262A48; }
.boton.secundario { background: var(--dt-secundario); border: 0; }

/* La cabeza: la marca a la izquierda, el menú de tres rayas a la derecha. Sin JavaScript. */
.cabeza { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.menu { position: relative; }
.menu > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; min-height: 48px;
                  padding: 8px 14px; border-radius: 12px; background: var(--dt-secundario); font-weight: 700; font-size: 15px; }
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary:focus-visible { outline: 3px solid var(--dt-vivo); outline-offset: 2px; }
.rayas { display: inline-grid; gap: 4px; }
.rayas i { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; }
.menu nav { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; width: min(270px, calc(100vw - 32px));
            display: grid; padding: 6px; background: var(--dt-superficie); border: 1px solid var(--dt-borde);
            border-radius: var(--radio); box-shadow: 0 14px 36px rgb(0 0 0 / .35); }
.menu nav a, .menu nav button.enlace { display: flex; align-items: center; width: 100%; min-height: 48px; margin: 0;
            padding: 0 12px; border-radius: 10px; color: var(--dt-texto); text-decoration: none; font-weight: 700;
            font-size: 16px; text-align: left; }
.menu nav a:hover, .menu nav button.enlace:hover { background: var(--dt-secundario); }
.menu nav form { margin: 4px 0 0; padding-top: 4px; border-top: 1px solid var(--dt-borde); }
.menu nav button.enlace { color: var(--dt-texto-suave); }

/* La bienvenida, con la cédula en gris (debajo en el celular, al lado en la computadora). */
.bienvenida { font-size: 24px; }
.bienvenida .cedula { display: block; margin-top: 4px; font-size: 15px; font-weight: 400; color: var(--dt-texto-suave); }
.atajos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0 4px; }
.atajos .boton { margin: 0; min-height: 48px; font-size: 16px; }

/* Renovar: pagar se presenta como seguir disfrutando del plan, nunca en rojo. */
.renovar { border: 2px solid var(--dt-vivo); }
.renovar.aviso { border-color: var(--dt-aviso); }
.renovar h2 { font-size: 20px; }
.renovar h3 { margin-top: 18px; }
.importe { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin: 6px 0 8px; }
.importe b { font-size: 30px; line-height: 1.15; }
.importe span { font-size: 15px; color: var(--dt-texto-suave); }
.nota-aviso { margin: 10px 0; padding: 8px 12px; border-left: 4px solid var(--dt-aviso); border-radius: 8px;
              background: color-mix(in srgb, var(--dt-aviso) 12%, var(--dt-superficie)); }
.plan-linea { margin: 0 0 4px; font-size: 18px; }
.plan p.suave { margin: 0; }
/* Las notificaciones en el inicio solo si faltan; si este dispositivo ya avisa, viven en el menú. */
[data-avisos].si-faltan[data-estado="granted"] { display: none; }
.constancia-enlace { display: inline-block; margin-top: 4px; font-size: 15px; font-weight: 700; }

/* Apariencia */
.temas { border: 0; padding: 0; margin: 8px 0 0; display: grid; gap: 10px; }
.temas legend { font-weight: 700; padding: 0; margin-bottom: 8px; }
.tema-opcion { min-height: 64px; }
.tema-opcion small { display: block; font-size: 14px; color: var(--dt-texto-suave); }
.muestra { width: 40px; height: 40px; border-radius: 10px; flex: none; border: 1px solid var(--dt-borde); }
.muestra-marca { background: linear-gradient(135deg, #010135 58%, #A127F2 58%); }
.muestra-claro { background: linear-gradient(135deg, #F4F5F8 58%, #8A1FD6 58%); }
.muestra-oscuro { background: linear-gradient(135deg, #0B0B0E 58%, #9124DA 58%); }

/* La constancia de pago: papel blanco en cualquier tema, porque se imprime o se guarda en PDF. */
.constancia { background: #FFFFFF; color: #1B1B2F; border-radius: var(--radio); padding: 20px; margin: 14px 0; }
.constancia header { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: center;
                     padding-bottom: 14px; border-bottom: 3px solid; border-image: var(--dt-degradado) 1; }
.constancia header img { width: 56px; height: auto; }
.constancia header b { display: block; letter-spacing: .14em; color: #010135; }
.constancia header span { font-size: 12px; color: #586472; }
.constancia .numero { grid-column: 1 / -1; margin: 10px 0 0; font-size: 14px; color: #586472; }
.constancia .numero b { color: #010135; font-size: 18px; }
.constancia dl { grid-template-columns: 1fr; gap: 0; margin-top: 12px; }
.constancia dt { color: #586472; font-size: 13px; margin-top: 10px; }
.constancia dd { font-size: 16px; }
.constancia .total { font-size: 26px; font-weight: 700; color: #010135; }
.constancia .pie { margin: 18px 0 0; padding-top: 10px; border-top: 1px solid #E2E5EB; font-size: 13px; color: #586472; }
@media (min-width: 560px) {
  .constancia { padding: 32px; }
  .constancia header { grid-template-columns: auto 1fr auto; }
  .constancia .numero { grid-column: auto; margin: 0; text-align: right; }
  .constancia dl { grid-template-columns: 170px 1fr; gap: 12px 16px; }
  .constancia dt { margin: 0; }
}
@media print {
  body { background: #FFFFFF; }
  .cinta, .sin-conexion, .solo-pantalla, .marca::before { display: none !important; }
  .envoltura { max-width: none; padding: 0; }
  .constancia { padding: 0; margin: 0; }
}

/* En tablet y computadora (panel-12): la cabeza y los atajos van a lo ancho; la cédula, al lado. */
@media (min-width: 768px) {
  .envoltura > :is(.cabeza, .atajos) { column-span: all; }
  .bienvenida .cedula { display: inline; margin: 0 0 0 12px; }
  .atajos { display: flex; gap: 10px; }
  .atajos .boton { width: auto; padding-inline: 22px; }
}

/* panel-16 · Los temas. El de la marca es el de siempre; claro y oscuro los decide marca:
   el cian no se lee sobre blanco (en el claro va un turquesa oscuro), y el oscuro apaga todo. */
[data-tema="claro"] {
  --dt-fondo: #F4F5F8; --dt-superficie: #FFFFFF; --dt-borde: #D5D9E2; --dt-texto: #1B1B2F;
  --dt-texto-suave: #586472; --dt-accion: #8A1FD6; --dt-violeta-texto: #7A1FC2; --dt-vivo: #0A7E8C;
  --dt-ok: #12804F; --dt-aviso: #A35F00; --dt-error: #C62C42; --dt-secundario: #E6E8EE;
  color-scheme: light;
}
[data-tema="claro"] :is(input, textarea, select) { background: #FFFFFF; border-color: var(--dt-borde); }
[data-tema="claro"] input.archivo { background: var(--dt-superficie); }
[data-tema="claro"] .menu nav { box-shadow: 0 14px 36px rgb(27 27 47 / .14); }
[data-tema="oscuro"] {
  --dt-fondo: #0B0B0E; --dt-superficie: #16161B; --dt-borde: #2A2A33; --dt-texto: #E4E4E8;
  --dt-texto-suave: #9198A1; --dt-accion: #9124DA; --dt-violeta-texto: #B46CF0; --dt-vivo: #4CC9C9;
  --dt-ok: #2BBF7E; --dt-aviso: #E0A020; --dt-error: #E85A6A; --dt-secundario: #24242C;
}
[data-tema="oscuro"] :is(input, textarea, select) { background: #E4E4E8; }