/* Facturación CFDI: estilo de sistema administrativo de escritorio (barra de pestañas,
   panel de módulos, ventanas con barra de herramientas y barra de estado). */
:root {
  --navy: #0f2a4a; --navy2: #17406b; --azul: #0d9488; --azul-osc: #0b7a70; --azul-cl: #e3f6f3; --azul-cl2: #c3ebe5;
  --acento: #2dd4bf; --verde: #148a4b; --verde-osc: #0f6e3b; --rojo: #c62828; --ambar: #b26a00;
  --fondo: #e8edf3; --panel: #ffffff; --borde: #d3dbe5; --borde2: #e3e8ef; --texto: #1b2a3a; --tenue: #64748b;
  --fila: #f8fafc; --hover: #effaf8; --sel: #d5f2ed;
  --sombra: 0 1px 2px rgba(15, 35, 60, .06), 0 4px 14px rgba(15, 35, 60, .07);
  --radio: 6px;
  font-size: 13px;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font-family: Inter, "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; color: var(--texto);
  background: var(--fondo); display: flex; flex-direction: column; }
a { color: var(--azul); text-decoration: none; }
a:hover { text-decoration: underline; }
.ico { width: 16px; height: 16px; flex: none; vertical-align: -3px; }
kbd { font-family: inherit; font-size: 10px; padding: 0 4px; border-radius: 3px; border: 1px solid currentColor; opacity: .7; }

/* ---------- cabecera ---------- */
.cabecera { height: 48px; flex: none; display: flex; align-items: center; gap: 14px; padding: 0 14px 0 6px; color: #fff;
  background: linear-gradient(90deg, var(--navy) 0%, #12345a 60%, var(--navy2) 100%); position: relative; z-index: 30; }
.cab-menu { background: none; border: 0; color: #cfe0f5; width: 36px; height: 36px; border-radius: 4px; cursor: pointer; display: grid; place-items: center; }
.cab-menu:hover { background: rgba(255,255,255,.1); color: #fff; }
.cab-menu .ico { width: 20px; height: 20px; }
.logo { display: flex; align-items: center; gap: 9px; color: #fff; }
.logo:hover { text-decoration: none; }
.logo img { height: 30px; display: block; }
.cab-empresa { display: flex; align-items: center; gap: 8px; margin-left: 14px; padding-left: 16px; border-left: 1px solid rgba(255,255,255,.18); }
.cab-empresa .ico { width: 20px; height: 20px; color: var(--acento); }
.cab-empresa div { display: flex; flex-direction: column; line-height: 1.15; }
.cab-logo-empresa { height: 30px; max-width: 110px; object-fit: contain; background: #fff; border-radius: 4px; padding: 2px 4px; }
.cab-empresa small { color: #a9c3e3; font-size: 11px; }
.cab-selector select { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.25); border-radius: 6px;
  height: 30px; padding: 0 8px; font-weight: 600; max-width: 340px; }
.cab-selector select option { color: var(--texto); background: #fff; }
.cab-der { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.cab-der form { margin: 0; }
.ambiente { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 20px; font-weight: 600; font-size: 11px;
  text-transform: uppercase; letter-spacing: .4px; }
.ambiente:hover { text-decoration: none; }
.ambiente .ico { width: 14px; height: 14px; }
.ambiente.pruebas { background: #ffd666; color: #5a3d00; }
.ambiente.produccion { background: #22a565; color: #fff; }
.ambiente.desconectado { background: #ffb4ab; color: #690005; }
.ambiente.timbres { background: rgba(255,255,255,.12); color: #fff; }
.ambiente.timbres.bajos { background: #ffb4ab; color: #690005; }
.cab-usuario { display: flex; align-items: center; gap: 8px; color: #dce8f7; padding: 3px 8px 3px 3px; border-radius: 20px; }
.cab-usuario:hover { background: rgba(255,255,255,.1); text-decoration: none; color: #fff; }
.avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--azul); display: grid; place-items: center; font-weight: 700; color: #fff;
  border: 2px solid rgba(255,255,255,.35); }
.cab-salir { background: none; border: 0; color: #cfe0f5; cursor: pointer; width: 32px; height: 32px; border-radius: 4px; display: grid; place-items: center; }
.cab-salir:hover { background: rgba(255,255,255,.12); color: #fff; }

/* ---------- ribbon ---------- */
.ribbon { flex: none; background: #f6f8fb; border-bottom: 1px solid var(--borde); box-shadow: 0 2px 6px rgba(15,35,60,.06); position: relative; z-index: 20; }
.ribbon-tabs { display: flex; gap: 2px; padding: 0 10px; background: linear-gradient(#143a62, #11314f); }
.ribbon-tabs button { background: none; border: 0; color: #c7d9ef; font: inherit; font-weight: 500; padding: 7px 16px 6px; cursor: pointer;
  border-radius: 5px 5px 0 0; border-top: 3px solid transparent; }
.ribbon-tabs button:hover { color: #fff; background: rgba(255,255,255,.08); }
.ribbon-tabs button.activo { background: #f6f8fb; color: var(--navy); font-weight: 600; border-top-color: var(--acento); }
.ribbon-panel { display: none; padding: 6px 8px 0; min-height: 86px; }
.ribbon-panel.activo { display: flex; }
.ribbon.plegado .ribbon-panel { display: none; }
.grupo { display: flex; flex-direction: column; padding: 0 8px; border-right: 1px solid var(--borde2); }
.grupo:last-child { border-right: 0; }
.grupo > small { text-align: center; color: var(--tenue); font-size: 10.5px; padding: 3px 0 5px; }
.botones-r { display: flex; gap: 2px; flex: 1; }
.rb { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; min-width: 66px; padding: 6px 6px 4px;
  border: 1px solid transparent; border-radius: 5px; color: var(--texto); font-size: 11.5px; line-height: 1.2; text-align: center; }
.rb:hover { background: var(--azul-cl); border-color: var(--azul-cl2); text-decoration: none; }
.rb.activo { background: var(--azul-cl2); border-color: #8fd9cf; }
.rb .ico { width: 26px; height: 26px; color: var(--azul); stroke-width: 1.6; }
.rb:hover .ico { color: var(--azul-osc); }

/* ---------- estructura ---------- */
.app { flex: 1; display: flex; min-height: 0; }
.modulos { width: 206px; flex: none; background: var(--panel); border-right: 1px solid var(--borde); padding: 8px 0 40px; overflow-y: auto;
  transition: width .15s; }
.modulos h4 { margin: 14px 16px 4px; font-size: 10.5px; text-transform: uppercase; color: #8a99ab; letter-spacing: .7px; font-weight: 600; white-space: nowrap; }
.modulos a { display: flex; align-items: center; gap: 10px; padding: 7px 16px; color: #334155; margin: 1px 8px; border-radius: 5px; white-space: nowrap; }
.modulos a .ico { width: 18px; height: 18px; color: #5f7d99; }
.modulos a kbd { margin-left: auto; color: #94a3b8; border-color: #cbd5e1; }
.modulos a:hover { background: var(--hover); text-decoration: none; }
.modulos a.activo { background: linear-gradient(90deg, var(--azul-cl2), var(--azul-cl)); color: var(--navy); font-weight: 600; box-shadow: inset 3px 0 0 var(--azul); }
.modulos a.activo .ico { color: var(--azul); }
.menu-corto .modulos { width: 58px; }
.menu-corto .modulos span, .menu-corto .modulos kbd, .menu-corto .modulos h4 { display: none; }
.menu-corto .modulos a { justify-content: center; padding: 9px 0; }
.contenido { flex: 1; min-width: 0; overflow-y: auto; padding: 14px 16px 40px; }

/* ---------- ventana (cada pantalla) ---------- */
.ventana { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); padding: 0 14px 14px; }
.ventana:empty { display: none; }
.titulo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 -14px 12px; padding: 9px 14px; border-radius: var(--radio) var(--radio) 0 0;
  background: linear-gradient(#fbfcfe, #eef3f9); border-bottom: 1px solid var(--borde); position: sticky; top: -14px; z-index: 10; }
.titulo h1 { font-size: 16px; margin: 0; font-weight: 650; color: var(--navy); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.titulo h1 > .ico { width: 22px; height: 22px; color: var(--azul); }
.titulo .acciones { margin-left: auto; display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.titulo .acciones form { margin: 0; display: inline; }

/* ---------- botones ---------- */
.btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--borde); background: #fff;
  border-radius: 5px; color: var(--texto); cursor: pointer; font: inherit; font-weight: 500; white-space: nowrap; transition: background .1s, box-shadow .1s; }
.btn:hover { background: var(--hover); border-color: #a7ddd5; text-decoration: none; }
.btn:active { box-shadow: inset 0 1px 3px rgba(0,0,0,.12); }
.btn .ico { color: var(--azul); }
.btn.primario { background: linear-gradient(#1d4775, var(--navy)); border-color: #0a1f37; color: #fff; }
.btn.primario:hover { background: linear-gradient(var(--navy2), #0a1f37); }
.btn.verde { background: linear-gradient(#11a698, var(--azul)); border-color: var(--azul-osc); color: #fff; }
.btn.verde:hover { background: linear-gradient(var(--azul), var(--azul-osc)); }
.btn.primario .ico, .btn.verde .ico { color: #fff; }
.btn.peligro { color: var(--rojo); }
.btn.peligro .ico { color: var(--rojo); }
.btn.peligro:hover { background: #fdecea; border-color: #f2b8b5; }
.btn kbd { opacity: .65; }
.btn[disabled] { opacity: .5; cursor: default; }
.separador { width: 1px; height: 24px; background: var(--borde); margin: 0 4px; }

/* ---------- filtros ---------- */
.filtros { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; background: var(--fila); border: 1px solid var(--borde2);
  padding: 9px 12px; margin-bottom: 10px; border-radius: var(--radio); }
.filtros label { display: flex; flex-direction: column; font-size: 11px; color: var(--tenue); gap: 3px; font-weight: 500; }
.buscador { position: relative; }
.buscador .ico { position: absolute; left: 9px; bottom: 9px; color: #94a3b8; }
.buscador input { padding-left: 30px; }

/* ---------- formularios ---------- */
input, select, textarea { font: inherit; height: 32px; padding: 0 9px; border: 1px solid #c9d3df; border-radius: 4px; background: #fff; color: var(--texto); }
textarea { height: auto; padding: 6px 9px; resize: vertical; }
input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--azul); }
input[type=file] { padding: 4px; height: auto; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(13, 148, 136, .2); }
input[readonly] { background: var(--fila); }
.panel { background: #fff; border: 1px solid var(--borde2); border-radius: var(--radio); padding: 12px 14px; margin-bottom: 12px; }
.panel h3 { margin: 0 0 12px; font-size: 12px; color: var(--navy); text-transform: uppercase; letter-spacing: .6px; font-weight: 650;
  display: flex; align-items: center; gap: 8px; }
.panel h3::before { content: ""; width: 4px; height: 14px; border-radius: 2px; background: var(--acento); }
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 14px; }
.rejilla .ancho2 { grid-column: span 2; }
.rejilla .ancho-total { grid-column: 1 / -1; }
.campo { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.campo label { font-size: 11px; color: #475569; font-weight: 600; }
.campo input, .campo select, .campo textarea { width: 100%; }
.campo input[type=checkbox] { width: 16px; }
.campo .ayuda { font-size: 11px; color: var(--tenue); }
.campo .error, .errorlist { color: var(--rojo); font-size: 11px; margin: 0; padding: 0; list-style: none; }
.botones { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }

/* ---------- tablas ---------- */
table.lista { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; }
.lista th { background: linear-gradient(#f5f8fb, #e7edf4); text-align: left; padding: 7px 10px; font-weight: 600; font-size: 11px; color: #3b4f66;
  text-transform: uppercase; letter-spacing: .4px; border-bottom: 1px solid var(--borde); white-space: nowrap; }
.lista td { padding: 6px 10px; border-bottom: 1px solid var(--borde2); vertical-align: middle; }
.lista tbody tr:nth-child(even) { background: var(--fila); }
.lista tbody tr:last-child td { border-bottom: 0; }
.lista tbody tr:hover { background: var(--hover); }
.lista tbody tr.sel { background: var(--sel); box-shadow: inset 3px 0 0 var(--azul); }
.lista tr[data-href] { cursor: pointer; }
.lista tfoot td { font-weight: 700; background: #eef3f8; border-top: 2px solid var(--borde); color: var(--navy); }
.num { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tenue { color: var(--tenue); }
.mono { font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace; font-size: 12px; }
.estado { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; padding: 2px 9px; border-radius: 20px; font-weight: 600; }
.estado::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.estado.B { background: #eef1f5; color: #52627a; }
.estado.T { background: #dcf5e7; color: var(--verde); }
.estado.C { background: #fde3e1; color: var(--rojo); }
.prueba { font-size: 10px; background: #ffe7a3; color: #6b4a00; padding: 1px 6px; border-radius: 3px; font-weight: 700; letter-spacing: .3px; }
.vencida { color: var(--rojo); font-weight: 600; }
.vacio-tabla { text-align: center; padding: 28px !important; color: var(--tenue); }
.paginacion { display: flex; gap: 8px; align-items: center; margin-top: 10px; color: var(--tenue); font-size: 12px; }

/* ---------- mensajes ---------- */
.mensajes { list-style: none; padding: 0; margin: 0 0 12px; }
.mensajes li { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--radio); margin-bottom: 6px;
  border: 1px solid; border-left-width: 4px; background: #fff; box-shadow: var(--sombra); }
.mensajes .ico { width: 18px; height: 18px; }
.mensajes .success { border-color: #9ad7b5; border-left-color: var(--verde); color: #0f5132; }
.mensajes .error { border-color: #f1b0ab; border-left-color: var(--rojo); color: #7f1d1d; }
.mensajes .warning, .mensajes .info { border-color: #f3d48a; border-left-color: #e0a100; color: #5a3d00; }
.ventana .mensajes li { box-shadow: none; }

/* ---------- escritorio ---------- */
.bienvenida { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.bienvenida h2 { margin: 0; font-size: 20px; color: var(--navy); }
.bienvenida p { margin: 2px 0 0; color: var(--tenue); }
.tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 16px; }
.tarjeta { display: flex; gap: 12px; align-items: center; background: #fff; border: 1px solid var(--borde2); padding: 14px; border-radius: 8px;
  box-shadow: var(--sombra); }
.tarjeta .circulo { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex: none; }
.tarjeta .circulo .ico { width: 22px; height: 22px; }
.tarjeta .etq { font-size: 11px; color: var(--tenue); text-transform: uppercase; letter-spacing: .4px; font-weight: 600; }
.tarjeta .valor { font-size: 21px; font-weight: 700; margin-top: 1px; font-variant-numeric: tabular-nums; color: var(--navy); }
.tarjeta .sub { font-size: 11.5px; color: var(--tenue); }
.c-azul { background: #e2ebf5; color: var(--navy2); }
.c-verde { background: var(--azul-cl); color: var(--azul); }
.c-naranja { background: #fdeedd; color: #c76a10; }
.c-rojo { background: #fde3e1; color: var(--rojo); }
.accesos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 18px; }
.acceso { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 10px; background: linear-gradient(#fff, #f6f9fd);
  border: 1px solid var(--borde2); border-radius: 8px; color: var(--texto); font-weight: 600; text-align: center; transition: transform .1s, box-shadow .1s; }
.acceso:hover { text-decoration: none; border-color: #8fd9cf; box-shadow: 0 6px 18px rgba(13,148,136,.16); transform: translateY(-1px); }
.acceso .ico { width: 30px; height: 30px; color: var(--azul); stroke-width: 1.5; }
.acceso small { font-weight: 400; color: var(--tenue); font-size: 11px; }
.seccion { font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--navy); margin: 0 0 8px; display: flex; align-items: center; gap: 8px; }
.seccion::before { content: ""; width: 4px; height: 14px; border-radius: 2px; background: var(--acento); }
.columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* ---------- captura de documento ---------- */
.encabezado-doc { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 10px 14px; }
.cliente-info { font-size: 12px; color: var(--azul-osc); margin-top: 3px; min-height: 16px; font-weight: 500; }
.rejilla-captura { border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; margin-bottom: 12px; background: #fff; }
table.captura { width: 100%; border-collapse: collapse; }
.captura th { background: linear-gradient(var(--navy2), var(--navy)); color: #fff; font-weight: 600; font-size: 11px; padding: 7px 6px; text-align: left;
  text-transform: uppercase; letter-spacing: .3px; }
.captura td { border-bottom: 1px solid var(--borde2); border-right: 1px solid var(--borde2); padding: 0; }
.captura td input, .captura td select { width: 100%; border: 0; border-radius: 0; height: 32px; padding: 0 6px; background: transparent; }
.captura td input:focus, .captura td select:focus { background: #fffbe6; box-shadow: inset 0 0 0 2px #f2b84b; }
.captura td.calc { padding: 0 8px; text-align: right; background: #f5f8fb; font-variant-numeric: tabular-nums; font-weight: 600; }
.captura tr.activa td { background: #f3f8ff; }
.captura .quitar { border: 0; background: none; color: #b0bccb; cursor: pointer; padding: 6px 8px; font-size: 14px; }
.captura .quitar:hover { color: var(--rojo); }
.captura td.desc .desc-linea { display: flex; }
.captura .obs-btn { border: 0; background: none; color: #b0bccb; cursor: pointer; padding: 0 7px; font-size: 11px; font-weight: 600; }
.captura .obs-btn:hover, .captura .obs-btn.con-texto { color: var(--azul-osc); }
.captura .obs { border-top: 1px dashed var(--borde2); }
.captura .obs textarea { display: block; width: 100%; border: 0; border-radius: 0; padding: 5px 6px; resize: vertical; background: transparent; font-size: 12px; min-height: 44px; }
.captura .obs textarea:focus { background: #fffbe6; box-shadow: inset 0 0 0 2px #f2b84b; outline: 0; }
.captura .obs-cuenta { display: block; text-align: right; font-size: 10.5px; color: var(--tenue); padding: 0 6px 3px; }
.captura .obs-cuenta.excedido { color: var(--rojo); font-weight: 600; }
.relaciones-doc #rel-tabla { margin-top: 8px; }
.metodos-correo ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.metodos-correo label { display: flex; gap: 8px; align-items: center; font-weight: 500; cursor: pointer; }
.planes { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.plan { border: 1px solid var(--borde); border-radius: var(--radio); padding: 14px; background: #fff; display: flex; flex-direction: column; gap: 6px; }
.plan.actual { border-color: var(--acento); box-shadow: 0 0 0 2px var(--acento) inset; }
.plan h4 { margin: 0; font-size: 15px; }
.plan .precio { font-size: 22px; font-weight: 700; color: var(--navy); }
.plan .precio small { font-size: 11px; font-weight: 400; color: var(--tenue); }
.plan .lista-simple { margin: 4px 0 8px; }
.relaciones-doc .rel-externo { grid-column: span 2; }
@media (max-width: 900px) { .relaciones-doc .rel-externo { grid-column: auto; } }
.pie-captura { display: flex; align-items: center; gap: 12px; padding: 7px 10px; background: var(--fila); color: var(--tenue); font-size: 11.5px; flex-wrap: wrap; }
.pie-captura kbd { color: var(--texto); border-color: #b6c2d1; background: #fff; opacity: 1; }
.totales { display: flex; justify-content: flex-end; }
.totales table { min-width: 300px; background: #fff; border: 1px solid var(--borde); border-collapse: separate; border-spacing: 0; border-radius: var(--radio); overflow: hidden; }
.totales td { padding: 6px 14px; border-bottom: 1px solid var(--borde2); }
.totales td:first-child { color: var(--tenue); }
.totales tr.total td { font-size: 18px; font-weight: 700; color: #fff; background: var(--navy); border-bottom: 0; }
.totales tr.total td:first-child { color: #9fe8de; font-size: 14px; }
.totales tr.total td:last-child { color: var(--acento); }

/* ---------- autocompletado ---------- */
.ac { position: relative; }
.ac-lista { position: absolute; z-index: 50; left: 0; top: calc(100% + 2px); min-width: 100%; width: max-content; max-width: 640px;
  background: #fff; border: 1px solid #8fd9cf; border-radius: 6px; box-shadow: 0 10px 30px rgba(15,35,60,.2); max-height: 320px; overflow: auto; padding: 4px; }
.ac-lista div { padding: 6px 9px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-radius: 4px; }
.ac-lista div.sel, .ac-lista div:hover { background: var(--azul); color: #fff; }
.ac-lista div small { opacity: .75; margin-left: 8px; }
.ac-lista .vacio { color: var(--tenue); cursor: default; }
.ac-lista .vacio:hover { background: none; color: var(--tenue); }

/* ---------- barra de estado ---------- */
.estado-barra { flex: none; height: 28px; display: flex; align-items: center; gap: 2px; padding: 0 8px; background: var(--navy); color: #b8cbe2; font-size: 11.5px; }
.eb-item { display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; border-right: 1px solid rgba(255,255,255,.12); height: 100%; }
.eb-item .ico { width: 13px; height: 13px; color: var(--acento); }
.eb-atajos { margin-left: auto; display: flex; gap: 14px; }
.eb-atajos kbd { color: #fff; border-color: rgba(255,255,255,.35); margin-right: 3px; opacity: 1; }

/* ---------- diálogos y detalle ---------- */
dialog { border: 0; border-radius: 10px; padding: 0; min-width: 400px; box-shadow: 0 20px 60px rgba(10,25,45,.35); }
dialog form { padding: 18px 20px; }
dialog h3 { margin: 0 0 6px; color: var(--navy); }
dialog::backdrop { background: rgba(13,39,71,.45); backdrop-filter: blur(2px); }
.detalle-dl { display: grid; grid-template-columns: 140px 1fr; gap: 6px 12px; margin: 0; }
.detalle-dl dt { color: var(--tenue); font-size: 12px; }
.detalle-dl dd { margin: 0; font-weight: 500; }

/* ---------- inicio de sesión ---------- */
.login { display: grid; grid-template-columns: 1.1fr 1fr; min-height: 100vh; background: #fff; }
.login-arte { background: radial-gradient(circle at 20% 20%, #1d4f7c 0%, var(--navy2) 40%, var(--navy) 100%); color: #fff; padding: 48px;
  display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; }
.login-arte::after { content: ""; position: absolute; right: -120px; bottom: -120px; width: 380px; height: 380px; border-radius: 50%;
  border: 60px solid rgba(45,212,191,.14); }
.login-logo { width: 340px; max-width: 100%; display: block; }
.login-arte h1 { font-size: 30px; margin: 28px 0 8px; }
.login-arte p { color: #c4d6ee; max-width: 420px; line-height: 1.5; }
.login-arte ul { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 10px; }
.login-arte li { display: flex; gap: 10px; align-items: center; color: #e2ecf8; }
.login-arte li .ico { color: var(--acento); width: 18px; height: 18px; }
.login-forma { display: grid; place-items: center; padding: 32px; }
.login-forma form { width: 100%; max-width: 340px; }
.login-simbolo { width: 54px; display: block; margin-bottom: 14px; }
.login-forma h2 { margin: 0 0 4px; color: var(--navy); }
.login-forma .campo { margin-top: 14px; }
.login-forma input { height: 40px; }
.login-forma .btn { height: 42px; width: 100%; justify-content: center; font-size: 14px; margin-top: 20px; }

@media (max-width: 1000px) {
  .modulos { display: none; }
  .ribbon-panel { overflow-x: auto; }
  .encabezado-doc, .columnas { grid-template-columns: 1fr; }
  .cab-empresa, .eb-atajos { display: none; }
  .login { grid-template-columns: 1fr; }
  .login-arte { display: none; }
}
@media print {
  .cabecera, .ribbon, .modulos, .estado-barra, .titulo .acciones, .no-imprimir { display: none !important; }
  body, .contenido { background: #fff; padding: 0; display: block; overflow: visible; }
  .ventana { border: 0; box-shadow: none; }
}

/* ---------- logo de la empresa ---------- */
.logo-actual { display: flex; align-items: center; gap: 14px; padding: 10px; border: 1px dashed var(--borde); border-radius: var(--radio); background: var(--fila); }
.logo-actual img { max-height: 70px; max-width: 220px; object-fit: contain; background: #fff; padding: 4px; border-radius: 4px; }
.avatar-lista { width: 30px; height: 30px; border-radius: 50%; background: var(--azul-cl); color: var(--azul-osc); display: inline-grid; place-items: center; font-weight: 700; margin-right: 8px; vertical-align: middle; }
.etiqueta { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 20px; font-weight: 600; background: #e2ebf5; color: var(--navy2); }
.etiqueta.admin { background: var(--azul-cl); color: var(--azul-osc); }

/* ---------- validación con el SAT ---------- */
.panel-sat { border-color: #a7ddd5; background: linear-gradient(#f4fbfa, #fff 60%); }
.sat-opciones { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; }
.sat-opciones .campo { width: 170px; }
.sat-pdf { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border: 1px dashed #7fcfc4; border-radius: var(--radio);
  background: #fff; cursor: pointer; }
.sat-pdf:hover { background: var(--azul-cl); }
.sat-pdf .ico { width: 22px; height: 22px; color: var(--azul); transform: rotate(-90deg); }
.sat-pdf span { display: flex; flex-direction: column; line-height: 1.25; }
.sat-pdf small { color: var(--tenue); font-size: 11px; }
.sat-resultado { margin-top: 12px; padding: 12px 14px; border-radius: var(--radio); border: 1px solid var(--borde); background: #fff; }
.sat-resultado.ok { border-color: #8fd9cf; border-left: 4px solid var(--azul); }
.sat-resultado.error { border-color: #f1b0ab; border-left: 4px solid var(--rojo); color: #7f1d1d; }
.sat-resultado.cargando { color: var(--tenue); display: flex; align-items: center; gap: 10px; }
.sat-cab { font-weight: 700; margin-bottom: 8px; }
.sat-resultado.ok .sat-cab { color: var(--azul-osc); }
.sat-reg { display: block; font-weight: 500; }
.sat-problemas { margin: 10px 0 0; padding-left: 18px; color: var(--rojo); }
.sat-estado { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12px; }
.sat-estado.ok { color: var(--azul-osc); }
.sat-estado.error { color: var(--rojo); }
.sat-chip { display: inline-block; margin-left: 6px; font-size: 11px; padding: 1px 8px; border-radius: 20px; background: #eef1f5; color: #52627a; font-weight: 600; }
.sat-chip.ok { background: var(--azul-cl); color: var(--azul-osc); }
.sat-chip.error { background: #fde3e1; color: var(--rojo); }
.ayuda.bien, .bien { color: var(--azul-osc); }
.ayuda.aviso { color: var(--ambar); }
.ayuda.error { color: var(--rojo); }
.girando { width: 16px; height: 16px; border: 2px solid var(--azul-cl2); border-top-color: var(--azul); border-radius: 50%; animation: girar .8s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
.con-boton { display: flex; gap: 6px; }
.con-boton input { flex: 1; min-width: 0; }
.con-boton .btn { height: 32px; }
dialog.dlg-grande { width: min(980px, 96vw); max-height: 92vh; }
dialog.dlg-grande form { padding: 0; display: flex; flex-direction: column; max-height: 92vh; }
.dlg-cab, .dlg-pie { display: flex; align-items: center; gap: 10px; padding: 12px 18px; background: linear-gradient(#fbfcfe, #eef3f9); }
.dlg-cab { border-bottom: 1px solid var(--borde); }
.dlg-cab h3 { margin: 0; display: flex; align-items: center; gap: 8px; }
.dlg-cab h3 .ico { width: 20px; height: 20px; color: var(--azul); }
.dlg-cab .btn, .dlg-pie .btn { margin-left: auto; }
.dlg-pie { border-top: 1px solid var(--borde); }
.dlg-cuerpo { padding: 14px 18px; overflow-y: auto; }
.sat-constancia { margin-top: 12px; border-top: 1px dashed var(--borde); padding-top: 10px; }
.sat-constancia summary { cursor: pointer; color: var(--azul-osc); font-weight: 600; margin-bottom: 8px; }
.lista-simple { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 8px; }
.lista-simple li { display: flex; gap: 8px; align-items: flex-start; }
.lista-simple .ico { color: var(--azul); margin-top: 1px; }
.pasos { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.barra-sat { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 12px;
  padding: 8px 10px; border-radius: var(--radio); background: var(--azul-cl); }
.barra-sat .tenue { display: flex; align-items: center; gap: 6px; }
.barra-sat .tenue .ico { color: var(--azul); }
.sat-config { margin-top: 12px; padding: 12px 14px; border: 1px solid #f3d48a; border-left: 4px solid #e0a100; border-radius: var(--radio); background: #fffaf0; }

/* ---------- combos de catálogos ---------- */
.combo { position: relative; display: flex; }
.combo input { flex: 1; min-width: 0; padding-right: 34px; }
.combo-flecha { position: absolute; right: 1px; top: 1px; bottom: 1px; width: 30px; border: 0; border-left: 1px solid var(--borde2);
  background: var(--fila); color: var(--tenue); border-radius: 0 4px 4px 0; cursor: pointer; display: grid; place-items: center; }
.combo-flecha:hover { color: var(--azul); background: var(--azul-cl); }
.combo .ac-lista { max-height: 360px; min-width: 100%; max-width: 760px; }
.combo .ac-lista div { white-space: normal; line-height: 1.3; }

/* Configuración → Formato de factura */
.formato-config { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 0.9fr); gap: 14px; align-items: start; }
.vista-formato { position: sticky; top: 8px; }
.vista-formato iframe { width: 100%; height: calc(100vh - 230px); min-height: 520px; border: 1px solid var(--borde); border-radius: var(--radio); background: #f1f5f9; }
.colores { display: flex; flex-wrap: wrap; gap: 8px; }
.color-opcion { display: flex; align-items: center; gap: 7px; padding: 6px 10px 6px 8px; border: 1px solid var(--borde); border-radius: 999px; cursor: pointer; background: #fff; font-size: 12px; }
.color-opcion input { position: absolute; opacity: 0; pointer-events: none; }
.color-opcion .pastilla { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255,255,255,.6); }
.color-opcion:has(input:checked) { border-color: var(--azul); box-shadow: 0 0 0 2px var(--azul-cl2); font-weight: 600; }
.color-opcion:has(input:focus-visible) { outline: 2px solid var(--azul); outline-offset: 2px; }
.cuenta-tarjeta { border: 1px solid var(--borde2); border-radius: var(--radio); padding: 10px 12px; margin-bottom: 8px; background: #fafcfd; }
.cuenta-cab { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.cuenta-cab label { display: flex; gap: 6px; align-items: center; font-size: 12px; cursor: pointer; }
@media (max-width: 1100px) { .formato-config { grid-template-columns: 1fr; } .vista-formato { position: static; } }
[hidden] { display: none !important; }
.xml-addenda { background: #0f172a; color: #e2e8f0; padding: 10px 12px; border-radius: var(--radio); font-size: 11px; overflow-x: auto; white-space: pre; max-height: 320px; }
.addenda-panel h3 .estado { margin-left: 6px; font-size: 10px; vertical-align: middle; }