/* ROGGERO · Control de Producción — hoja de estilos.
   1) Bloque original del prototipo V2.8.0 (tal cual, para no cambiar el diseño que aprobó el cliente).
   2) Agregados: login, estado de la base, overlay del presupuesto y tablas en mobile.
   3) Sistema de diseño unificado con /flota/ (tipografía + rellenos + radios + espaciado).
*/

*{box-sizing:border-box} body{margin:0;font-family:Arial,Helvetica,sans-serif;font-weight:700;color:#fff;background:radial-gradient(circle at 88% 12%,#260000 0,#090909 27%,#050505 72%);min-height:100vh}
button,input,select,textarea{font-family:Arial,Helvetica,sans-serif}
header{padding:14px 28px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.headleft{display:flex;align-items:center;gap:18px}.logo{background:#d40000;border:1px solid #ff3030;border-radius:5px;padding:10px 18px;font-size:31px;font-weight:1000;letter-spacing:1px}
h1{font-size:30px;margin:0;font-weight:1000;letter-spacing:.5px}.ver{color:#ff5c77}.sub{font-size:15px;margin-top:3px}
.headright{display:flex;gap:9px;align-items:center}.headbtn,.db{background:#292929;color:#fff;border:1px solid #484848;border-radius:16px;padding:12px 16px;font-size:15px;font-weight:1000}.db{border-color:#008c49}.dot{color:#19d66b}
.wrap{padding:24px 38px;max-width:1700px;margin:auto}
.tabs{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:24px}.tab{background:#1b1b1b;color:#fff;border:1px solid #555;border-radius:19px;padding:18px;font-size:21px;font-weight:1000}.tab.active{background:#df0000;border-color:#df0000}
.panel{background:linear-gradient(#464646,#292929);border:1px solid #4b4b4b;border-radius:28px;padding:30px;margin-bottom:26px}
.paneltitle{font-size:23px;font-weight:1000;margin-bottom:2px}.muted{color:#d3d3d3;font-size:15px}
.cards{display:grid;grid-template-columns:repeat(6,1fr);gap:13px;margin:20px 0}
.card{background:#0c0c0c;border:1px solid #555;border-radius:17px;padding:18px}.card .lab{font-size:13px;color:#ddd}.card .num{font-size:32px;font-weight:1000;margin-top:5px}.yellow .num{color:#ffd83e}.red .num{color:#ff5555}.green .num{color:#42dc79}
.filters{display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:11px;margin-top:16px}.f label{display:block;font-size:12px;margin:0 0 6px 4px}.control{width:100%;background:#090909;color:#fff;border:1px solid #555;border-radius:14px;padding:14px;font-size:15px;font-weight:800}
.btn{border:1px solid #555;border-radius:14px;padding:13px 16px;background:#0a0a0a;color:#fff;font-size:14px;font-weight:1000;cursor:pointer}.btn.red{background:#d90000;border-color:#d90000}.btn.light{background:#e7f0f8;color:#071326;border:0}.add{width:100%;margin:17px 0 18px;padding:19px;font-size:20px;border-radius:17px}
.tablewrap{overflow:auto;border-radius:17px;border:1px solid #555}
.groupTitle{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:22px 0 10px;padding:0 3px}
.groupTitle .left{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:1000}
.count{background:#111;border:1px solid #555;border-radius:999px;padding:5px 9px;font-size:12px}
.groupTitle.att .left{color:#ff6868}.groupTitle.prod .left{color:#fff}.groupTitle.fin .left{color:#48df7d}
.finishedWrap{display:none}.finishedWrap.show{display:block}
.chev{min-width:135px}table{border-collapse:collapse;width:100%;min-width:1050px;background:#0c0c0c}th{background:#080808;padding:15px;text-align:left;font-size:13px}td{padding:14px;border-top:1px solid #393939;font-size:14px}.warn{background:#473b0b}.over{background:#4b1111}.done{background:#10371d}.badge{padding:7px 9px;border-radius:10px;background:#2d2d2d;font-size:11px}.badge.y{background:#d7a900;color:#111}.badge.r{background:#d80000}.badge.g{background:#158b43}
#stats{display:none}.statsHead{display:flex;justify-content:space-between;gap:15px;align-items:end}.statsHead .f{width:260px}.compare{margin-top:18px}
.modal{display:none;position:fixed;inset:0;background:#000c;align-items:center;justify-content:center;padding:16px;z-index:20}.modal.show{display:flex}.modalbox{width:min(900px,100%);max-height:92vh;overflow:auto;background:linear-gradient(#464646,#252525);border:1px solid #666;border-radius:25px;padding:26px}.modtop{display:flex;justify-content:space-between;align-items:center}.searchbox{border:1px dashed #888;border-radius:17px;padding:16px;margin:18px 0;background:#303030}.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.preview{display:none;background:#101010;border:1px solid #555;border-radius:15px;padding:16px;margin-bottom:15px}.note{font-size:12px;color:#ccc;margin-top:12px}
@media(max-width:950px){header{padding:12px;align-items:flex-start}.headright{display:none}.logo{font-size:21px;padding:8px 10px}h1{font-size:18px}.sub{font-size:11px}.wrap{padding:12px}.panel{padding:18px;border-radius:20px}.cards{grid-template-columns:1fr 1fr}.cards .card:last-child{grid-column:auto}.filters,.row{grid-template-columns:1fr}.statsHead{display:block}.statsHead .f{width:100%;margin-top:12px}}

/* V2.8.0 - EN ESPERA: violeta fuerte */
.badge.o,
.statusCell .badge.o{
  background:#7c3aed !important;
  color:#ffffff !important;
  border:1px solid #a78bfa !important;
  box-shadow:none !important;
  font-weight:900 !important;
}
.card.orange{
  border-top:6px solid #7c3aed !important;
}
.card.orange .num{
  color:#a78bfa !important;
}


.badge.urgent{background:#fff!important;color:#111!important;border:1px solid #fff!important;font-weight:900!important;margin-bottom:5px}

.badge.delivery{background:#2563eb!important;color:#fff!important;border:1px solid #60a5fa!important;font-weight:900!important;margin-top:5px}


.statusCell{vertical-align:middle!important}
.statusCell .badge{display:inline-flex!important;align-items:center!important;line-height:1.15!important;margin:0!important}
.statusCell > div{display:block!important;margin:0 0 6px 0!important;min-height:22px!important}
.statusCell > div:last-child{margin-bottom:0!important}
.statusCell > .badge{display:flex!important;width:max-content!important;margin:0 0 6px 0!important}


.badge.productType{
  background:#111827!important;
  color:#fff!important;
  border:1px solid #6b7280!important;
  font-weight:900!important;
}


/* ==========================================================================
   ROGGERO · Control de Producción — agregados a la hoja original del prototipo
   (login, estado de la base, overlay del presupuesto, tablas en mobile)
   ========================================================================== */

[hidden]{display:none!important}

/* ---------- Login ---------- */
.login-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:22px;position:relative}
.login-card{width:min(430px,100%);background:linear-gradient(#464646,#292929);border:1px solid #4b4b4b;border-radius:28px;padding:30px;text-align:center}
.login-card .logo{display:inline-block;margin-bottom:14px}
.login-card h1{font-size:24px;margin:0 0 6px}
.login-card label{display:block;text-align:left;font-size:12px;margin:18px 0 6px 4px}
.login-card .control{text-align:center;font-size:26px;letter-spacing:8px;padding:16px}
.login-card .btn.red{width:100%;margin-top:14px;padding:17px;font-size:18px;border-radius:16px}
.login-error{margin-top:14px;background:#4b1111;border:1px solid #d80000;border-radius:12px;padding:12px;font-size:14px}
.home-link{display:inline-block;margin-top:20px;color:#fff;text-decoration:none;background:#292929;border:1px solid #484848;border-radius:16px;padding:11px 16px;font-size:14px;font-weight:1000}
.home-link:hover{background:#3a3a3a}
header .home-link{margin-top:0}

/* ---------- Estado de la base ---------- */
.db-status{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.login-shell .db-status{position:absolute;top:16px;right:16px;background:#292929;border:1px solid #484848;border-radius:16px;padding:10px 14px;font-size:13px;font-weight:1000}
.db-status .dot{font-size:12px;line-height:1}
.db-status.ok{border-color:#008c49}.db-status.ok .dot{color:#19d66b}
.db-status.wait{border-color:#8a7100}.db-status.wait .dot{color:#ffd83e}
.db-status.err{border-color:#b40000}.db-status.err .dot{color:#ff5555}

/* ---------- Utilidades ---------- */
.row.between{display:flex;align-items:center;justify-content:space-between;gap:12px}
.empty{padding:22px;text-align:center;color:#d3d3d3;font-size:14px;background:#0c0c0c}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(120%);background:#0c0c0c;border:1px solid #666;border-radius:16px;padding:14px 20px;font-size:15px;font-weight:1000;z-index:60;transition:transform .25s ease;max-width:92vw;text-align:center}
.toast.show{transform:translateX(-50%) translateY(0)}
.toast.err{border-color:#d80000;background:#3a0d0d}
.btn[disabled]{opacity:.55;cursor:not-allowed}

/* ---------- Buscador de presupuestos ---------- */
.ppt-results{margin-top:10px;max-height:290px;overflow:auto;border:1px solid #555;border-radius:14px;background:#0c0c0c}
.ppt-row{display:block;width:100%;text-align:left;background:transparent;color:#fff;border:0;border-bottom:1px solid #333;padding:13px 15px;font-size:14px;font-weight:800;cursor:pointer}
.ppt-row:last-child{border-bottom:0}
.ppt-row:hover{background:#1d1d1d}
.ppt-row b{font-size:15px}
.ppt-row .sub2{display:block;color:#cfcfcf;font-size:12px;font-weight:700;margin-top:3px}
.preview-data{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}
.preview-data div{background:#0c0c0c;border:1px solid #444;border-radius:12px;padding:10px 12px;min-width:0}
.preview-data .k{display:block;font-size:11px;color:#bdbdbd;margin-bottom:3px}
.preview-data .v{display:block;font-size:14px;word-break:break-word}

/* ---------- Overlay de la orden de producción ---------- */
.ppt-modalbox{width:min(980px,100%)}
.ppt-body{margin-top:18px}
.ppt-sec{background:#101010;border:1px solid #555;border-radius:15px;padding:16px;margin-bottom:14px}
.ppt-sec h3{margin:0 0 10px;font-size:15px;letter-spacing:.5px}
.ppt-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ppt-grid div{min-width:0}
.ppt-grid .k{display:block;font-size:11px;color:#bdbdbd}
.ppt-grid .v{display:block;font-size:15px;word-break:break-word}
.ppt-items{width:100%;min-width:0;border-collapse:collapse;background:transparent}
.ppt-items th{background:#080808;padding:10px;font-size:12px;text-align:left}
.ppt-items td{padding:10px;border-top:1px solid #393939;font-size:13px;vertical-align:top}
.ppt-items .qty{white-space:nowrap}
.ppt-item-extra{display:block;color:#cfcfcf;font-size:12px;font-weight:700;margin-top:3px}
.ppt-histrow{display:flex;justify-content:space-between;gap:12px;border-top:1px solid #393939;padding:9px 0;font-size:13px}
.ppt-histrow:first-child{border-top:0}
.ppt-histrow .when{color:#bdbdbd;white-space:nowrap;font-size:12px}
.ppt-warn{background:#473b0b;border:1px solid #8a7100;border-radius:12px;padding:12px;font-size:13px;margin-bottom:14px}

/* Filtros del histórico de terminados (antes iban con grid inline, que no se apilaba en el celular) */
.filters.fin{grid-template-columns:1fr 1fr auto;margin:0 0 12px 0}

/* ---------- Mobile: cabecera visible y tablas en fichas ---------- */
@media(max-width:950px){
  .filters.fin{grid-template-columns:1fr}
  header{flex-direction:column;gap:12px}
  .headright{display:flex!important;flex-wrap:wrap;width:100%;gap:8px}
  .headright .headbtn,.headright .db{flex:1 1 auto;text-align:center;padding:10px 12px;font-size:13px;border-radius:14px}
  .tabs{gap:8px}.tab{padding:15px;font-size:17px}
  .preview-data{grid-template-columns:1fr}
  .ppt-grid{grid-template-columns:1fr 1fr}
  .modalbox{padding:18px;border-radius:20px}
}
@media(max-width:760px){
  .cards{grid-template-columns:1fr 1fr;gap:10px}
  .card .num{font-size:26px}
  .groupTitle{flex-direction:column;align-items:flex-start;gap:8px}
  .chev{width:100%}
  .ppt-grid{grid-template-columns:1fr}
  .tablewrap{overflow:visible;border:0;border-radius:0}
  table,#attentionTable,#productionTable,#finishedTable,.compare table{min-width:0;width:100%;background:transparent}
  table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  table tr{display:block;background:#0c0c0c;border:1px solid #555;border-radius:16px;padding:12px;margin-bottom:12px}
  table tr.warn{background:#473b0b}table tr.over{background:#4b1111}table tr.done{background:#10371d}
  table td{display:flex;gap:10px;justify-content:space-between;align-items:flex-start;border-top:0;padding:6px 2px;font-size:14px}
  table td+td{border-top:1px solid rgba(255,255,255,.09)}
  table td::before{content:attr(data-l);color:#bdbdbd;font-size:11px;font-weight:1000;flex:0 0 42%;text-align:left}
  table td.empty{display:block;text-align:center}
  table td.empty::before{display:none}
  table td.acts{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding-top:12px}
  table td.acts::before{display:none}
  table td.acts .btn{width:100%;padding:13px 8px;font-size:13px}
  table td.statusCell{display:block}
  table td.statusCell::before{display:block;margin-bottom:6px}
  .ppt-items thead{position:static;width:auto;height:auto;clip:auto}
  .ppt-items tr{display:table-row;background:transparent;border:0;border-radius:0;padding:0;margin:0}
  .ppt-items td{display:table-cell;padding:9px 6px;border-top:1px solid #393939}
  .ppt-items td+td{border-top:1px solid #393939}
  .ppt-items td::before{display:none}
  .ppt-sec{padding:13px}
}
@media(max-width:420px){
  .cards{grid-template-columns:1fr}
  .login-card{padding:22px}
}

/* ---------- Impresión ---------- */
@media print{
  header,.tabs,.filters,.add,.groupTitle .btn,.modal,.toast,.headright,td.acts{display:none!important}
  body{background:#fff;color:#111}
  .panel{background:#fff;border:1px solid #999}
  table{background:#fff}th{background:#eee;color:#111}td{color:#111}
  tr,td,tr.warn,tr.over,tr.done{background:#fff!important;color:#111!important}
  .badge,.badge.o,.badge.y,.badge.r,.badge.g,.badge.urgent,.badge.delivery,.badge.productType{background:#fff!important;color:#111!important;border:1px solid #333!important}
  .muted,.card .lab{color:#555!important}.card{background:#fff;border:1px solid #999}.card .num{color:#111!important}
  .groupTitle .left{color:#111!important}
}


/* ==========================================================================
   SISTEMA DE DISEÑO ÚNICO — copiado de /flota/ (pedido de Julián, 2026-09-14)
   No es solo tipografía: también rellenos, alturas, radios y espaciado, que es
   lo que hacía ver a Producción más grande y pesada que Flota.
   Todos los valores salieron de MEDIR la app de Flota en el navegador.
   Va último en la hoja y con !important porque tiene que ganarle al bloque
   original del prototipo.

   ESCALA FLOTA (escritorio)
   texto 16/400 · marca 24/1000 (pad 5/12, r 4) · título de app 22/700
   título de panel 20/700 · subtítulo 16/700 · texto chico 12/400 · nota 11/400
   pestaña 13/900 (pad 10/14, r 12) · botón 12/900 (pad 8/10, r 12)
   botón principal 18/900 (pad 11/14, r 12)
   campo 15/400 (pad 12/13, r 12) · lista 16/900 · etiqueta 13/900 (margen 6)
   panel pad 16, r 18 · tarjeta pad 15, r 16 · número 30/1000 · rótulo 12/400
   tabla r 14, celdas 13px pad 11/10 · chip 11/900 (pad 5/8, r 999)
   estado de la base 11/900 (pad 5/10, r 999) · link 12/900 (pad 7/11, r 10)
   ========================================================================== */

/* ---------- Base ---------- */
body { font-size: 16px !important; font-weight: 400 !important; }
.wrap, .panel, .card, .cards, .f, .filters, .modalbox, .modtop, .preview, .preview-data,
.searchbox, .row, .tablewrap, .tabs, .ppt-body, .ppt-results, header, section, table, tbody, thead, tr, p, div {
  font-weight: 400 !important;
}
.wrap { padding: 18px 14px 70px !important; max-width: 1700px !important; }

/* ---------- Cabecera ---------- */
header { padding: 18px 14px 0 !important; gap: 12px !important; margin-bottom: 0 !important; }
.headleft { gap: 12px !important; }
.logo { font-size: 24px !important; font-weight: 1000 !important; letter-spacing: 1px !important; padding: 5px 12px !important; border-radius: 4px !important; }
header h1, h1 { font-size: 22px !important; font-weight: 700 !important; letter-spacing: .5px !important; }
.ver { font-size: 22px !important; font-weight: 700 !important; }
.sub { font-size: 12px !important; font-weight: 400 !important; margin-top: 3px !important; }
.headright { gap: 8px !important; }
.headbtn, .home-link { font-size: 12px !important; font-weight: 900 !important; padding: 7px 11px !important; border-radius: 10px !important; gap: 6px !important; }
.db, .db-status { font-size: 11px !important; font-weight: 900 !important; padding: 5px 10px !important; border-radius: 999px !important; gap: 7px !important; }
.db .txt, .db-status .txt, .db .dot, .db-status .dot { font-size: 11px !important; font-weight: 900 !important; }

/* ---------- Pestañas ---------- */
.tabs { gap: 8px !important; margin: 0 0 16px !important; }
.tab { font-size: 13.3333px !important; font-weight: 900 !important; padding: 10px 14px !important; border-radius: 12px !important; }

/* ---------- Paneles y títulos ---------- */
.panel { padding: 16px !important; border-radius: 18px !important; margin-bottom: 16px !important; }
.paneltitle { font-size: 24px !important; font-weight: 700 !important; margin: 0 0 6px !important; }
.groupTitle { margin: 16px 0 10px !important; }
.groupTitle .left { font-size: 18.72px !important; font-weight: 700 !important; gap: 8px !important; }
h2 { font-size: 24px !important; font-weight: 700 !important; margin: 0 0 10px !important; }
h3, .ppt-sec h3 { font-size: 18.72px !important; font-weight: 700 !important; margin: 0 0 10px !important; }

/* ---------- Texto secundario ---------- */
.muted, .empty, .small { font-size: 12px !important; font-weight: 400 !important; }
.note { font-size: 11px !important; font-weight: 400 !important; }
.count, .chip { font-size: 11px !important; font-weight: 900 !important; padding: 5px 8px !important; border-radius: 999px !important; }
#finishedProductSummary { font-weight: 900 !important; }

/* ---------- Tarjetas del resumen ---------- */
.cards { gap: 10px !important; margin: 14px 0 0 !important; }
.card { padding: 15px !important; border-radius: 16px !important; }
.card .lab { font-size: 12px !important; font-weight: 400 !important; }
.card .num { font-size: 30px !important; font-weight: 1000 !important; line-height: 1.05 !important; margin-top: 5px !important; }

/* ---------- Botones ---------- */
.btn { font-size: 12px !important; font-weight: 900 !important; padding: 8px 10px !important; border-radius: 12px !important; line-height: 1.15 !important; }
.add, .btn.light.add { font-size: 18px !important; font-weight: 900 !important; padding: 11px 14px !important; border-radius: 12px !important; margin: 14px 0 !important; }
.modal-submit { font-size: 18px !important; font-weight: 900 !important; padding: 11px 14px !important; border-radius: 12px !important; }
.chev { min-width: 0 !important; }

/* ---------- Formularios ---------- */
.control, input.control, textarea.control { font-size: 15px !important; font-weight: 400 !important; padding: 12px 13px !important; border-radius: 12px !important; }
select.control { font-size: 16px !important; font-weight: 900 !important; padding: 12px 13px !important; border-radius: 12px !important; }
option { font-size: 15px !important; font-weight: 400 !important; }
label, .f label { font-size: 13px !important; font-weight: 900 !important; margin: 0 0 6px !important; display: block !important; }
.filters { gap: 10px !important; margin-top: 14px !important; }
.filters.fin { margin: 0 0 12px !important; }

/* ---------- Tablas ---------- */
.tablewrap { border-radius: 14px !important; }
th { font-size: 13px !important; font-weight: 700 !important; padding: 11px 10px !important; }
td { font-size: 13px !important; font-weight: 400 !important; padding: 11px 10px !important; }
.badge, .badge.y, .badge.r, .badge.g, .badge.o, .badge.urgent, .badge.delivery, .badge.productType {
  font-size: 11px !important; font-weight: 900 !important; padding: 5px 8px !important; border-radius: 999px !important;
}
.statusCell > div { margin: 0 0 5px !important; }

/* ---------- Modales ---------- */
.modal { padding: 16px !important; }
.modalbox { padding: 18px !important; border-radius: 20px !important; }
.searchbox { padding: 14px !important; border-radius: 14px !important; margin: 14px 0 !important; }
.preview { padding: 14px !important; border-radius: 14px !important; margin-bottom: 14px !important; }
.modal-lead { font-size: 16px !important; font-weight: 700 !important; }
.modal-code { font-size: 20px !important; font-weight: 700 !important; }
#customHint { font-size: 11px !important; font-weight: 400 !important; }

/* ---------- Buscador y overlay del presupuesto ---------- */
.ppt-results { border-radius: 12px !important; }
.ppt-row { font-size: 13px !important; font-weight: 400 !important; padding: 10px 12px !important; }
.ppt-row b { font-size: 14px !important; font-weight: 900 !important; }
.ppt-row .sub2 { font-size: 12px !important; font-weight: 400 !important; }
.preview-data { gap: 10px !important; }
.preview-data div { padding: 10px 12px !important; border-radius: 12px !important; }
.ppt-grid .k, .preview-data .k { font-size: 11px !important; font-weight: 400 !important; }
.ppt-grid .v, .preview-data .v { font-size: 14px !important; font-weight: 700 !important; }
.ppt-sec { padding: 15px !important; border-radius: 16px !important; margin-bottom: 12px !important; }
.ppt-grid { gap: 10px !important; }
.ppt-items th { font-size: 12px !important; font-weight: 700 !important; padding: 9px 10px !important; }
.ppt-items td { font-size: 13px !important; font-weight: 400 !important; padding: 9px 10px !important; }
.ppt-item-extra { font-size: 12px !important; font-weight: 400 !important; }
.ppt-histrow { font-size: 13px !important; font-weight: 400 !important; padding: 8px 0 !important; }
.ppt-histrow .when { font-size: 12px !important; font-weight: 400 !important; }
.ppt-warn { font-size: 12px !important; font-weight: 700 !important; padding: 12px !important; border-radius: 14px !important; }

/* ---------- Avisos ---------- */
.toast { font-size: 14px !important; font-weight: 900 !important; padding: 12px 18px !important; border-radius: 14px !important; }
.login-error { font-size: 14px !important; font-weight: 900 !important; line-height: 1.3 !important; padding: 12px !important; border-radius: 14px !important; }

/* ---------- Login (tal cual la tarjeta de Flota) ---------- */
.login-card { padding: 22px !important; border-radius: 20px !important; }
.login-card h1 { font-size: 24px !important; font-weight: 700 !important; letter-spacing: normal !important; margin: 0 0 6px !important; }
.login-card .logo { font-size: 24px !important; font-weight: 1000 !important; padding: 5px 12px !important; border-radius: 4px !important; margin-bottom: 14px !important; }
.login-card label { font-size: 12px !important; font-weight: 900 !important; margin: 18px 0 6px !important; }
.login-card .control { font-size: 26px !important; font-weight: 900 !important; letter-spacing: 8px !important; padding: 14px !important; border-radius: 12px !important; }
.login-card .btn.red { font-size: 18px !important; font-weight: 900 !important; padding: 11px 14px !important; border-radius: 12px !important; margin-top: 14px !important; }
.login-card .muted { font-size: 12px !important; font-weight: 900 !important; }
.login-card .home-link { font-size: 14px !important; font-weight: 900 !important; padding: 9px 13px !important; border-radius: 12px !important; }
.login-shell .db-status { font-size: 11px !important; font-weight: 900 !important; padding: 5px 10px !important; }

/* ---------- Tamaño de letra (A− / % / A+) ---------- */
.fontsize { display: inline-flex !important; align-items: stretch !important; gap: 0 !important; background: #292929 !important; border: 1px solid #484848 !important; border-radius: 999px !important; overflow: hidden !important; }
.fsbtn, .fsval { background: transparent !important; color: #fff !important; border: 0 !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 11px !important; font-weight: 900 !important; line-height: 1 !important; padding: 5px 9px !important; cursor: pointer !important; }
.fsbtn { font-size: 13px !important; min-width: 28px !important; }
.fsbtn:hover, .fsval:hover { background: #3a3a3a !important; }
.fsval { min-width: 44px !important; text-align: center !important; color: #d3d3d3 !important; border-left: 1px solid #484848 !important; border-right: 1px solid #484848 !important; }
.login-fs { margin-top: 12px !important; display: flex !important; justify-content: center !important; }

/* ==========================================================================
   Celular — misma reducción que hace Flota
   ========================================================================== */
@media (max-width: 820px) {
  body { font-size: 14px !important; }
  .wrap { padding: 14px 12px 70px !important; }
  header { padding: 14px 12px 0 !important; }
  .logo, .login-card .logo { font-size: 18px !important; }
  header h1, h1 { font-size: 18px !important; line-height: 1.1 !important; }
  .ver { font-size: 18px !important; }
  .sub { font-size: 11px !important; }
  h2, .paneltitle { font-size: 18px !important; }
  h3, .groupTitle .left, .ppt-sec h3 { font-size: 16px !important; }
  .tab { font-size: 12px !important; line-height: 1.1 !important; padding: 10px 12px !important; }
  .panel { padding: 14px !important; border-radius: 16px !important; }
  .card { padding: 13px !important; }
  .card .num { font-size: 21px !important; }
  .card .lab { font-size: 11px !important; }
  .control, input.control, textarea.control, select.control { font-size: 16px !important; padding: 11px 12px !important; }
  label, .f label { font-size: 12px !important; }
  .db, .db-status, .db .txt, .db-status .txt { font-size: 10px !important; }
  .add, .btn.light.add, .modal-submit { font-size: 16px !important; padding: 12px 14px !important; }
  .modal-lead { font-size: 15px !important; }
  .modal-code { font-size: 18px !important; }
  .modalbox { padding: 16px !important; border-radius: 18px !important; }
  td { font-size: 13px !important; }
  table td::before { font-size: 11px !important; font-weight: 900 !important; }
  .toast { font-size: 14px !important; }
}

@media (max-width: 430px) {
  .wrap { padding: 8px 10px 30px !important; }
  header { padding: 8px 10px 0 !important; }
  .panel { padding: 12px !important; }
  .tab { font-size: 11px !important; padding: 9px 10px !important; }
  /* Flota muestra sus tarjetas de resumen en dos columnas también en el celular */
  .cards { grid-template-columns: 1fr 1fr !important; gap: 9px !important; }
  .card { padding: 12px !important; }
  .card .num { font-size: 19px !important; }
  table td::before { font-size: 10px !important; }
}