/*
 * ImpoNM — estilos sobre W3.CSS (template "Interior Design").
 * El rojo del template se reemplaza por --magno-gris. El rojo queda solo para alertas y errores.
 */
:root {
  --magno-gris: #44464A;      /* color principal (ajustable) */
  --magno-gris-claro: #5c5f64;
  --borde: #e2e3e5;
  --fondo-suave: #f5f6f7;
  --texto: #2b2c2e;
  --tenue: #7a7d82;
  --error: #c62828;
  --error-fondo: #fdecea;
  --aviso: #b26a00;
  --aviso-fondo: #fff4e0;
  --ok: #2e7d32;
  --ok-fondo: #e8f5e9;
  --info: #1d5f8a;
  --info-fondo: #e8f1f8;
  /* colores de eventos de la línea de tiempo */
  --ev-pedido: #44464A;
  --ev-embarque: #00897b;     /* verde azulado */
  --ev-arribo: #6a3fb5;       /* violeta */
  --ev-entrega: #2e7d32;      /* verde */
  --menu-ancho: 240px;
  --tl-col-orden: 150px;
}

html, body, h1, h2, h3, h4, h5, h6 { font-family: "Poppins", sans-serif; }
[hidden] { display: none !important; }
*, *::before, *::after { box-sizing: border-box; }
body { color: var(--texto); font-size: 14px; background: #fff; }

/* ---------- Menú lateral ---------- */
.menu-lateral {
  background: var(--magno-gris); color: #fff; width: var(--menu-ancho); z-index: 3;
  display: flex; flex-direction: column; padding: 0 0 8px; font-size: 14px;
}
.menu-lateral .w3-bar-block { flex: 1 0 auto; }
.menu-lateral .w3-bar-item { padding: 7px 20px; border-left: 3px solid transparent; }
.menu-lateral .w3-bar-item:hover { background: rgba(255,255,255,.12) !important; color: #fff !important; }
.menu-lateral .w3-bar-item.activo { background: rgba(255,255,255,.16); border-left-color: #fff; font-weight: 500; }
.menu-lateral .ti { width: 20px; display: inline-block; text-align: center; margin-right: 4px; font-size: 18px; vertical-align: -3px; }
.menu-cerrar { width: 100%; text-align: left; padding: 12px 20px !important; }
.menu-logo { padding: 26px 20px 18px; }
.menu-logo a { color: #fff; text-decoration: none; }
.menu-logo img { width: 180px; max-width: 100%; height: auto; display: block; }
.logo-texto { font-size: 15px; letter-spacing: 2px; line-height: 1.2; display: block; }
.logo-texto b { font-size: 26px; letter-spacing: 4px; }
.menu-app { font-size: 12px; opacity: .75; margin-top: 6px; letter-spacing: 1px; text-transform: uppercase; }
.menu-seccion { padding: 16px 20px 4px; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; opacity: .6; }
.menu-pie { padding: 12px 20px 0; border-top: 1px solid rgba(255,255,255,.15); margin-top: 12px; }
.menu-usuario { font-size: 13px; line-height: 1.3; }
.menu-usuario small { opacity: .7; }
.menu-salir { padding: 6px 0 !important; color: #fff !important; background: none !important; opacity: .85; }
.menu-salir:hover { opacity: 1; text-decoration: underline; }
.menu-version { font-size: 11px; opacity: .6; margin-top: 6px; }

.barra-movil { background: var(--magno-gris); color: #fff; padding: 4px 8px !important; font-size: 18px; z-index: 2; display: flex; align-items: center; gap: 8px; }
.barra-movil .w3-button { padding: 6px 12px; }
.barra-movil span { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.contenido { margin-left: calc(var(--menu-ancho) + 24px); margin-right: 24px; padding: 20px 0 40px; }
@media (max-width: 992px) {
  /* W3.CSS fuerza margin 0 en .w3-main: se usa padding */
  .contenido { padding: 60px 12px 40px; }
}

/* ---------- Títulos con la barrita corta debajo ---------- */
.titulo { font-size: 22px; font-weight: 600; margin: 0; color: var(--magno-gris); }
.barrita { width: 40px; border: 0; border-top: 4px solid var(--magno-gris); border-radius: 2px; margin: 6px 0 16px; }
.subtitulo { font-size: 16px; font-weight: 600; margin: 26px 0 10px; color: var(--magno-gris); }
.subtitulo-inline { display: inline; font-size: 16px; font-weight: 600; color: var(--magno-gris); }
.cabecera { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.miga { margin: 0 0 6px; font-size: 13px; }
.miga a { color: var(--tenue); text-decoration: none; }
.miga a:hover { color: var(--texto); }

/* ---------- Botones ---------- */
.btn-primario { background: var(--magno-gris) !important; color: #fff !important; border-radius: 4px; padding: 7px 16px; }
.btn-primario:hover { background: var(--magno-gris-claro) !important; }
.btn { background: #fff !important; border: 1px solid #c9cbce !important; border-radius: 4px; padding: 6px 14px; color: var(--texto) !important; }
.btn:hover { background: var(--fondo-suave) !important; }
.btn-chico { padding: 3px 7px !important; background: none !important; border-radius: 4px; color: var(--tenue); }
.btn-chico:hover { background: var(--fondo-suave) !important; color: var(--texto); }
.btn-link { background: none !important; padding: 4px 0 !important; color: var(--tenue); }
.btn-link:hover { color: var(--texto); text-decoration: underline; }
.botonera { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; align-items: center; }
.form-linea { display: inline-block; margin: 0; }
.acciones { white-space: nowrap; text-align: right; width: 1%; }
.acciones .form-linea { display: inline; }

/* ---------- Formularios ---------- */
/* Grilla de W3.CSS con flex en lugar de float: no se desarma con campos de distinta altura */
.w3-row-padding { display: flex; flex-wrap: wrap; }
.w3-row-padding::before, .w3-row-padding::after { display: none; }
.w3-row-padding > .w3-col { float: none; }
.tarjeta { border: 1px solid var(--borde); border-radius: 6px; padding: 14px 8px; margin-bottom: 14px; background: #fff; }
.campo { margin-bottom: 10px; }
.campo label { font-size: 12px; color: var(--tenue); display: block; margin-bottom: 2px; }
.w3-input, .w3-select { padding: 6px 8px; border: 1px solid #cfd1d4; border-radius: 4px; font-size: 14px; background: #fff; }
.w3-input:focus, .w3-select:focus { outline: 2px solid rgba(68,70,74,.25); border-color: var(--magno-gris); }
.w3-input[readonly] { background: var(--fondo-suave); }
textarea.w3-input { resize: vertical; }
.mayus { text-transform: uppercase; }
.req { color: var(--error); }
.ayuda { color: var(--tenue); font-size: 12px; display: block; margin-top: 2px; }
.bloque { display: block; }
.check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 14px; }
.check-campo { margin-top: 22px; }
.filtros { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.filtros .w3-input[type=search] { flex: 1 1 240px; max-width: 420px; }
.filtros .w3-select { width: auto; flex: 0 1 220px; }
.form-fila { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 10px; }
.form-fila .w3-input, .form-fila .w3-select { width: auto; flex: 1 1 140px; }
.lista-checks { max-height: 340px; overflow-y: auto; border: 1px solid var(--borde); border-radius: 4px; padding: 6px 10px; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2px 16px; }
.lista-checks .check { padding: 3px 0; }
kbd { background: var(--fondo-suave); border: 1px solid var(--borde); border-radius: 3px; padding: 0 4px; font-size: 11px; }

/* ---------- Tablas (en el celular pasan a tarjetas) ---------- */
.tabla { width: 100%; border-collapse: collapse; margin-bottom: 8px; }
.tabla th { text-align: left; font-weight: 500; font-size: 12px; color: var(--tenue); border-bottom: 2px solid var(--borde); padding: 8px 8px; white-space: nowrap; }
.tabla td { border-bottom: 1px solid var(--borde); padding: 7px 8px; vertical-align: middle; }
.tabla tfoot th { border-top: 2px solid var(--borde); border-bottom: 0; color: var(--texto); font-weight: 600; }
.tabla tr.fila-link { cursor: pointer; }
.tabla tr.fila-link:hover td { background: var(--fondo-suave); }
.tabla tr.inactivo td { color: var(--tenue); }
.col-num { text-align: right !important; }
.col-n { width: 32px; color: var(--tenue); }
.tabla-scroll { overflow-x: auto; }
.mono { font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .5px; }
.fila-edicion td { background: var(--fondo-suave); }

@media (max-width: 600px) {
  .tabla.resp thead { display: none; }
  .tabla.resp, .tabla.resp tbody, .tabla.resp tr, .tabla.resp td { display: block; width: 100%; }
  .tabla.resp tr { border: 1px solid var(--borde); border-radius: 6px; margin-bottom: 10px; padding: 6px 10px; }
  .tabla.resp td { border: 0; padding: 4px 0; display: flex; justify-content: space-between; gap: 12px; text-align: right; }
  .tabla.resp td::before { content: attr(data-label); color: var(--tenue); font-size: 12px; text-align: left; flex: 0 0 auto; }
  .tabla.resp td:not([data-label])::before { content: none; }
  .tabla.resp td:empty { display: none; }
  .tabla.resp td.acciones { width: 100%; justify-content: flex-end; }
  .tabla.resp td .w3-input { max-width: 60%; }
  .contenido { font-size: 14px; }
}

/* ---------- Avisos ---------- */
.aviso { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 6px; margin-bottom: 12px; border-left: 4px solid; }
.aviso .ti { font-size: 18px; flex: 0 0 auto; }
.aviso span { flex: 1; }
.aviso-x { background: none; border: 0; font-size: 20px; line-height: 1; cursor: pointer; color: inherit; opacity: .6; }
.aviso-error { background: var(--error-fondo); border-color: var(--error); color: #8e1c1c; }
.aviso-aviso { background: var(--aviso-fondo); border-color: var(--aviso); color: #7a4a00; }
.aviso-ok { background: var(--ok-fondo); border-color: var(--ok); color: #1f5a23; }
.aviso-info { background: var(--info-fondo); border-color: var(--info); color: #164a6b; }
.txt-error { color: var(--error) !important; }
.txt-aviso { color: var(--aviso) !important; }
.txt-ok { color: var(--ok) !important; }
.txt-info { color: var(--info) !important; }
.tenue { color: var(--tenue); }
.error-detalle { background: var(--fondo-suave); padding: 12px; font-size: 12px; overflow-x: auto; white-space: pre-wrap; }

/* ---------- Etiquetas ---------- */
.badge { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 11px; font-weight: 500; background: #eceded; color: #555; vertical-align: middle; white-space: nowrap; }
.badge .ti { font-size: 12px; vertical-align: -1px; }
.badge-ok { background: var(--ok-fondo); color: var(--ok); }
.badge-aviso { background: var(--aviso-fondo); color: var(--aviso); }
.badge-error { background: var(--error-fondo); color: var(--error); }
.est-borrador { background: #eceded; color: #666; }
.est-pedida { background: #eef0f3; color: #44464A; }
.est-confirmada { background: #e3ecf7; color: #2d5d93; }
.est-en_produccion { background: #fff1d6; color: #8a5a00; }
.est-embarcada { background: #dff3f0; color: #00695c; }
.est-en_puerto { background: #ece4f7; color: #5a33a0; }
.est-despachada { background: #e0f0fb; color: #1d5f8a; }
.est-recibida { background: var(--ok-fondo); color: var(--ok); }
.est-cerrada { background: #44464A; color: #fff; }
.est-cancelada { background: var(--error-fondo); color: var(--error); text-decoration: line-through; }

/* ---------- Desplegables ---------- */
.desplegable { border: 1px solid var(--borde); border-radius: 6px; margin-bottom: 8px; padding: 0 12px; }
.desplegable > summary { cursor: pointer; padding: 10px 0; list-style-position: inside; }
.desplegable[open] > summary { border-bottom: 1px solid var(--borde); margin-bottom: 10px; }
.desplegable > form { padding-bottom: 10px; }
.desplegable.inactivo > summary { color: var(--tenue); }
.desplegable-nuevo > summary { color: var(--magno-gris); font-weight: 500; }

/* ---------- Ficha de la orden ---------- */
.ficha-encabezado { position: sticky; top: 0; z-index: 1; background: #fff; border-bottom: 1px solid var(--borde); padding: 8px 0 10px; margin-bottom: 10px; }
@media (max-width: 992px) { .ficha-encabezado { top: 44px; } }
.ficha-titulo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ficha-prov { font-weight: 500; font-size: 15px; }
.ficha-datos { display: flex; gap: 6px 24px; flex-wrap: wrap; margin-top: 8px; }
.ficha-datos div { display: flex; flex-direction: column; }
.ficha-datos small { color: var(--tenue); font-size: 11px; }
.ficha-datos b { font-weight: 600; font-size: 15px; }
.alertas-ficha { list-style: none; padding: 0; margin: 0 0 10px; }
.alertas-ficha li { padding: 4px 0; font-size: 13px; }
.alerta-error, .alertas-ficha .alerta-error { color: var(--error); }
.alertas-ficha .alerta-aviso { color: var(--aviso); }
.pestanas { display: flex; gap: 2px; border-bottom: 2px solid var(--borde); overflow-x: auto; margin-bottom: 14px; }
.pestana { padding: 8px 14px; text-decoration: none; color: var(--tenue); border-bottom: 3px solid transparent; margin-bottom: -2px; white-space: nowrap; }
.pestana:hover { color: var(--texto); }
.pestana.activa { color: var(--magno-gris); border-bottom-color: var(--magno-gris); font-weight: 600; }
.pestana.deshabilitada { opacity: .4; cursor: not-allowed; }
.acciones-orden { margin-top: 30px; border-top: 1px solid var(--borde); padding-top: 8px; }
.tabla-hitos .w3-input { max-width: 170px; }
.tabla-hitos td:last-child .w3-input { max-width: none; }
.hito-hecho td:first-child b { font-weight: 500; }

/* ---------- Mercadería ---------- */
.tabla-items { min-width: 980px; }
.tabla-items td { padding: 4px 4px; vertical-align: top; }
.tabla-items .w3-input { padding: 4px 6px; }
.tabla-items .num { text-align: right; width: 90px; }
.tabla-items .col-medida { min-width: 300px; }
.tabla-items .col-notas .w3-input { min-width: 120px; }
.tabla-items td.col-num { padding-top: 9px; }
.i-info small { margin-top: 2px; }
.dif { background: var(--aviso-fondo) !important; color: var(--aviso); font-weight: 500; }
.dif-error { background: var(--error-fondo) !important; color: var(--error); font-weight: 500; }
.ayuda-carga { margin-top: -4px; }

.autocompletar { position: absolute; z-index: 10; background: #fff; border: 1px solid #c9cbce; border-radius: 4px; box-shadow: 0 6px 18px rgba(0,0,0,.12); max-height: 320px; overflow-y: auto; min-width: 320px; }
.autocompletar div { padding: 6px 10px; cursor: pointer; border-bottom: 1px solid var(--fondo-suave); }
.autocompletar div.activo, .autocompletar div:hover { background: var(--fondo-suave); }
.autocompletar small { display: block; color: var(--tenue); }
.autocompletar .ac-vacio { color: var(--tenue); cursor: default; }

/* ---------- Reparto ---------- */
.tabla-reparto td, .tabla-reparto th { padding: 4px 6px; }
.tabla-reparto .num { width: 70px; text-align: right; padding: 4px 6px; }
.celda-reparto { display: flex; align-items: center; justify-content: flex-end; gap: 2px; }
.r-pend { font-weight: 600; }
.r-pend.pend-error { background: var(--error-fondo); color: var(--error); }
.r-pend.pend-aceptado { background: var(--aviso-fondo); color: var(--aviso); }
.r-pend.pend-ok { color: var(--ok); }
.reparto-movil { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
@media (max-width: 600px) {
  .tabla-reparto .col-cont:not(.visible) { display: none; }
}

/* ---------- Documentos ---------- */
.checklist { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.checklist-etapa { border: 1px solid var(--borde); border-radius: 6px; padding: 8px 12px; }
.checklist-etapa:not(.requerida) { opacity: .75; }
.checklist-etapa h4 { font-size: 13px; font-weight: 600; margin: 0 0 6px; }
.checklist-etapa ul { list-style: none; padding: 0; margin: 0; }
.checklist-etapa li { padding: 2px 0; font-size: 13px; }
.chk-ok .ti { color: var(--ok); }
.chk-falta { color: var(--error); }
.chk-pendiente .ti { color: var(--tenue); }

/* ---------- Modal (vista previa) ---------- */
.modal-caja { width: 92%; max-width: 1000px; border-radius: 6px; overflow: hidden; }
.modal-barra { display: flex; justify-content: space-between; align-items: center; padding: 4px 4px 4px 14px; background: var(--magno-gris); color: #fff; }
.modal-barra .w3-button { color: #fff; font-size: 20px; }
#modal-cuerpo iframe { width: 100%; height: 78vh; border: 0; display: block; }
#modal-cuerpo img { max-width: 100%; max-height: 80vh; display: block; margin: 0 auto; }

/* ---------- Inicio ---------- */
.selector-vista { display: inline-flex; border: 1px solid #c9cbce; border-radius: 6px; overflow: hidden; margin-bottom: 14px; }
.selector-vista a { padding: 6px 14px; text-decoration: none; color: var(--texto); border-right: 1px solid #c9cbce; }
.selector-vista a:last-child { border-right: 0; }
.selector-vista a.activa { background: var(--magno-gris); color: #fff; }
.alertas { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.alerta-grupo { border: 1px solid var(--borde); border-left: 4px solid; border-radius: 6px; padding: 8px 12px; }
.alerta-grupo.alerta-error { border-left-color: var(--error); }
.alerta-grupo.alerta-aviso { border-left-color: var(--aviso); }
.alerta-grupo h4 { font-size: 13px; font-weight: 600; margin: 0 0 6px; }
.alerta-grupo.alerta-error h4 { color: var(--error); }
.alerta-grupo.alerta-aviso h4 { color: var(--aviso); }
.alerta-grupo ul { margin: 0; padding-left: 18px; font-size: 13px; }
.alerta-grupo li a { color: var(--texto); text-decoration: none; }
.alerta-grupo li a:hover { text-decoration: underline; }

.tablero { display: grid; grid-template-columns: repeat(7, minmax(150px, 1fr)); gap: 8px; overflow-x: auto; padding-bottom: 6px; }
.tablero-col { background: var(--fondo-suave); border-radius: 6px; padding: 8px; min-height: 120px; }
.tablero-col h4 { font-size: 13px; margin: 0 0 8px; display: flex; justify-content: space-between; align-items: center; }
.tablero-tarjeta { display: block; background: #fff; border: 1px solid var(--borde); border-radius: 5px; padding: 7px 9px; margin-bottom: 6px; text-decoration: none; color: var(--texto); font-size: 13px; }
.tablero-tarjeta:hover { border-color: var(--magno-gris); }
.tablero-tarjeta span, .tablero-tarjeta small { display: block; }
.tablero-tarjeta small { color: var(--tenue); font-size: 11px; }

/* ---------- Línea de tiempo ---------- */
.tl-controles { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.tl-rango { font-size: 12px; margin: 0 8px; }
.tl-leyenda { margin-left: auto; display: flex; gap: 14px; font-size: 12px; color: var(--tenue); align-items: center; }
.tl-leyenda .tl-mk { position: static; transform: none; display: inline-flex; vertical-align: middle; }
.tl-scroll { overflow-x: auto; border: 1px solid var(--borde); border-radius: 6px; }
.tl { min-width: 100%; position: relative; }
.tl-cabecera, .tl-fila { display: flex; }
.tl-col-orden { flex: 0 0 var(--tl-col-orden); width: var(--tl-col-orden); padding: 6px 8px; position: sticky; left: 0; background: #fff; z-index: 2; border-right: 1px solid var(--borde); text-decoration: none; color: var(--texto); overflow: hidden; }
.tl-col-orden b { display: block; font-size: 12px; font-weight: 600; }
.tl-col-orden small { display: block; font-size: 11px; color: var(--tenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-semanas { flex: 1; display: grid; grid-template-columns: repeat(var(--semanas), 1fr); }
.tl-semana { font-size: 11px; color: var(--tenue); text-align: center; padding: 6px 0; border-left: 1px solid var(--borde); }
.tl-semana.actual { background: var(--magno-gris); color: #fff; font-weight: 600; }
.tl-cabecera { border-bottom: 1px solid var(--borde); }
.tl-cuerpo { position: relative; }
.tl-fila { border-bottom: 1px solid var(--fondo-suave); min-height: 44px; }
.tl-pista { flex: 1; position: relative; display: block; min-height: 44px; }
.tl-fondo { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--semanas), 1fr); }
.tl-fondo span { border-left: 1px solid var(--fondo-suave); }
.tl-fondo span.actual { background: rgba(68,70,74,.07); }
.tl-barra { position: absolute; top: 19px; height: 6px; border-radius: 3px; background: #7c8fa6; }
.tl-barra.entregada { background: #c7c9cc; }
.tl-fila:hover .tl-barra { filter: brightness(.9); }
.tl-flecha { position: absolute; top: -9px; font-size: 16px; color: var(--tenue); }
.tl-flecha.izq { left: -2px; }
.tl-flecha.der { right: -2px; }
.tl-corrimiento { position: absolute; top: 21px; border-top: 2px dotted #8a8d92; height: 0; }
.tl-mk { position: absolute; top: 22px; transform: translate(-50%, -50%); width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; z-index: 1; }
.tl-mk.mk-real { color: #fff; }
.tl-mk.mk-real.ev-pedido { background: var(--ev-pedido); }
.tl-mk.mk-real.ev-embarque { background: var(--ev-embarque); }
.tl-mk.mk-real.ev-arribo { background: var(--ev-arribo); }
.tl-mk.mk-real.ev-entrega { background: var(--ev-entrega); }
.tl-mk.mk-prevista { background: #fff; color: #8a8d92; border: 1.5px dashed #9a9da2; }
.tl-mk.mk-atrasado { background: var(--error); color: #fff; }
.tl-mk.mk-fantasma { background: #fff; color: #8a8d92; border: 1.5px dashed #9a9da2; opacity: .35; }
.tl-hoy { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px solid var(--error); z-index: 1; pointer-events: none; }
.tl-vacio { padding: 20px; text-align: center; }
@media (max-width: 600px) {
  :root { --tl-col-orden: 100px; }
  .tl-col-orden { padding: 6px 6px; }
  .tl-col-orden b { font-size: 11px; white-space: nowrap; }
  .tl-semana { font-size: 9px; letter-spacing: -.3px; }
  /* 4 semanas a cada lado visibles: el resto con deslizamiento horizontal */
  .tl { width: calc(var(--tl-col-orden) + (100vw - 24px - var(--tl-col-orden)) * 17 / 9); }
  .tl-leyenda { display: none; }
}

/* ---------- Tooltip ---------- */
.tooltip { position: fixed; z-index: 20; background: #2b2c2e; color: #fff; padding: 8px 10px; border-radius: 5px; font-size: 12px; white-space: pre-line; max-width: 320px; pointer-events: none; box-shadow: 0 4px 12px rgba(0,0,0,.2); line-height: 1.5; }

/* ---------- Ingreso ---------- */
.pagina-simple { background: var(--magno-gris); min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.caja-simple { background: #fff; border-radius: 8px; padding: 0 0 16px; width: 92%; max-width: 420px; overflow: hidden; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.caja-simple .menu-version { color: var(--tenue); opacity: 1; }
.caja-simple > .aviso { margin: 12px; text-align: left; }
.caja-simple .titulo, .caja-simple p { padding: 0 20px; }
.caja-simple .titulo { padding-top: 20px; }
.caja-simple .barrita { margin: 6px auto 16px; }
.login-logo { background: var(--magno-gris); color: #fff; padding: 34px 20px 26px; }
.login-logo img { width: 240px; max-width: 80%; height: auto; }
.login-cuerpo { padding: 28px 20px 12px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.login-cuerpo .aviso { width: 100%; text-align: left; }
.login-dev { margin-top: 20px; border-top: 1px dashed var(--borde); padding-top: 10px; width: 100%; display: flex; flex-direction: column; gap: 6px; }
.mayus::placeholder { text-transform: none; }
@media (max-width: 600px) {
  .selector-vista { display: flex; width: 100%; }
  .selector-vista a { flex: 1; text-align: center; white-space: nowrap; padding: 6px 4px; font-size: 12px; }
  .tabla-reparto .num { width: 56px; }
}