/* Diario INELMA — interfaz de campo */
:root {
  --cobalto: #0E1A3A;
  --cobalto-2: #182A57;
  --cobalto-3: #24396F;
  --amarillo: #FFC531;
  --amarillo-2: #FFD866;
  --cian: #14A3B8;
  --fondo: #F5F7FB;
  --papel: #FFFFFF;
  --linea: #DDE3EE;
  --texto: #18213A;
  --suave: #5B6680;
  --rojo: #E5484D;
  --rojo-bg: #FDECEC;
  --verde: #1F9D63;
  --verde-bg: #E6F6EE;
  --naranja: #C76A00;
  --naranja-bg: #FFF4DF;
  --radio: 10px;
  --sombra: 0 1px 2px rgba(14, 26, 58, .06), 0 8px 24px rgba(14, 26, 58, .06);
  --t: 180ms cubic-bezier(.2, .7, .2, 1);
  font-family: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: var(--texto);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--fondo); font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: 'Barlow Condensed', 'Barlow', sans-serif; letter-spacing: .01em; margin: 0; line-height: 1.1; }
h1 { font-size: 2rem; font-weight: 700; }
h2 { font-size: 1.35rem; font-weight: 600; }
h3 { font-size: 1.05rem; font-weight: 600; }
a { color: var(--cobalto-3); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 2px; }
.oculto { display: none !important; }

/* ---------- Estructura ---------- */
.app { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.lateral {
  background: var(--cobalto); color: #DCE4F7; display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; padding: 20px 14px;
}
.marca { display: flex; align-items: center; gap: 10px; padding: 4px 8px 22px; }
.marca svg { flex: none; }
.marca b { font-family: 'Barlow Condensed'; font-size: 1.45rem; color: #fff; letter-spacing: .04em; display: block; line-height: 1; }
.marca small { color: #8EA0CC; font-size: .78rem; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a, .nav button.navbtn {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px;
  color: #C3CEEA; text-decoration: none; border: 0; background: none; cursor: pointer; text-align: left; width: 100%;
  transition: background var(--t), color var(--t);
}
.nav a:hover { background: var(--cobalto-2); color: #fff; }
.nav a.activo { background: var(--cobalto-2); color: #fff; box-shadow: inset 3px 0 0 var(--amarillo); }
.nav .sep { margin: 14px 12px 6px; color: #6F82B3; font-size: .8rem; }
.nav svg { width: 18px; height: 18px; flex: none; }
.usuario-box { margin-top: auto; padding: 12px; border-radius: 10px; background: var(--cobalto-2); }
.usuario-box .nom { color: #fff; font-weight: 600; }
.usuario-box .rol { color: #8EA0CC; font-size: .8rem; }
.usuario-box .acc { display: flex; gap: 6px; margin-top: 10px; }
.usuario-box button { flex: 1; background: var(--cobalto-3); color: #DCE4F7; border: 0; border-radius: 6px; padding: 6px; cursor: pointer; font-size: .82rem; }
.usuario-box button:hover { background: #2F4887; }

main { padding: 28px clamp(16px, 3vw, 40px) 90px; min-width: 0; }
.cabecera { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.cabecera p { margin: 4px 0 0; color: var(--suave); }
.vista { animation: entrar 260ms cubic-bezier(.2, .7, .2, 1); }
@keyframes entrar { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent;
  border-radius: 8px; padding: 9px 16px; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: transform var(--t), background var(--t), box-shadow var(--t), border-color var(--t);
}
.btn:active { transform: scale(.97); }
.btn svg { width: 17px; height: 17px; }
.btn-pri { background: var(--amarillo); color: var(--cobalto); }
.btn-pri:hover { background: var(--amarillo-2); box-shadow: 0 4px 14px rgba(255, 197, 49, .45); }
.btn-osc { background: var(--cobalto); color: #fff; }
.btn-osc:hover { background: var(--cobalto-3); }
.btn-sec { background: var(--papel); border-color: var(--linea); color: var(--texto); }
.btn-sec:hover { border-color: var(--cobalto-3); }
.btn-peligro { background: var(--papel); color: var(--rojo); border-color: #F3C1C3; }
.btn-peligro:hover { background: var(--rojo-bg); }
.btn-xl { padding: 13px 26px; font-size: 1.05rem; }
.btn-ico { padding: 7px; border-radius: 7px; background: transparent; border: 1px solid transparent; cursor: pointer; color: var(--suave); display: inline-flex; }
.btn-ico:hover { background: #EEF1F8; color: var(--cobalto); }
.btn-ico svg { width: 18px; height: 18px; }
.btn-excel { background: #1D7044; color: #fff; }
.btn-excel:hover { background: #185E39; }
.btn-pdf { background: #B42318; color: #fff; }
.btn-pdf:hover { background: #962017; }
.btn[disabled] { opacity: .55; pointer-events: none; }

/* ---------- Tarjetas y formularios ---------- */
.panel { background: var(--papel); border: 1px solid var(--linea); border-radius: 14px; padding: 22px; box-shadow: var(--sombra); }
.panel + .panel { margin-top: 16px; }
.panel h2 { margin-bottom: 4px; }
.panel .ayuda { color: var(--suave); margin: 0 0 16px; font-size: .92rem; }
.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo > label, .etq { font-weight: 600; font-size: .9rem; color: var(--cobalto-2); }
.campo .req { color: var(--rojo); }
.input, select.input, textarea.input {
  width: 100%; border: 1.5px solid var(--linea); border-radius: 8px; padding: 10px 12px; background: #fff;
  transition: border-color var(--t), box-shadow var(--t);
}
.input:hover { border-color: #BFC9DC; }
.input:focus { outline: none; border-color: var(--cian); box-shadow: 0 0 0 3px rgba(20, 163, 184, .18); }
textarea.input { resize: vertical; min-height: 44px; overflow: hidden; }
.input.serie, .mono { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.input.error { border-color: var(--rojo); background: #FFFBFB; }
.input.ok { border-color: var(--verde); }
.input.aviso { border-color: var(--naranja); background: #FFFCF5; }
.msg { font-size: .85rem; display: flex; gap: 6px; align-items: flex-start; }
.msg.err { color: var(--rojo); }
.msg.ok { color: var(--verde); }
.msg.av { color: var(--naranja); }
.msg.info { color: var(--suave); }
.temblor { animation: temblor 380ms; }
@keyframes temblor { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.fila-acciones { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }

/* Segmentado */
.segmentos { align-self: flex-start; display: inline-flex; flex-wrap: wrap; background: #EEF1F8; border-radius: 9px; padding: 3px; gap: 3px; }
.segmentos button { border: 0; background: transparent; padding: 7px 14px; border-radius: 7px; cursor: pointer; font-weight: 600; color: var(--suave); transition: background var(--t), color var(--t); }
.segmentos button.on { background: var(--cobalto); color: #fff; box-shadow: 0 2px 6px rgba(14, 26, 58, .25); }
.segmentos.estado button.on[data-v="PENDIENTE"] { background: var(--naranja); }
.segmentos.estado button.on[data-v="DIGITADA"] { background: var(--verde); }

/* ---------- Interruptor tipo breaker: ¿Tiene orden? ---------- */
.breaker-zona { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; }
.breaker {
  position: relative; width: 64px; height: 92px; border-radius: 10px; border: 0; cursor: pointer; padding: 0;
  background: linear-gradient(#2A3B66, #16244A); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .45), 0 1px 0 rgba(255, 255, 255, .5);
}
.breaker::before { content: ''; position: absolute; left: 22px; right: 22px; top: 12px; bottom: 12px; border-radius: 6px; background: #0A1330; }
.breaker .palanca {
  position: absolute; left: 14px; right: 14px; height: 38px; border-radius: 6px; top: 44px;
  background: linear-gradient(#D7DCE6, #A9B2C4); box-shadow: 0 3px 0 #7D879B, 0 6px 10px rgba(0, 0, 0, .35);
  transition: top 260ms cubic-bezier(.5, 1.6, .4, 1), background 200ms;
  display: grid; place-items: center; font: 700 .78rem 'Barlow Condensed'; color: #3B465F;
}
.breaker.on .palanca { top: 10px; background: linear-gradient(var(--amarillo-2), var(--amarillo)); box-shadow: 0 3px 0 #C99200, 0 6px 14px rgba(255, 197, 49, .5); color: var(--cobalto); }
.breaker .led { position: absolute; top: -6px; right: -6px; width: 14px; height: 14px; border-radius: 50%; background: #5B6680; border: 3px solid var(--papel); transition: background 200ms, box-shadow 200ms; }
.breaker.on .led { background: #36E07F; box-shadow: 0 0 10px #36E07F; }
.breaker-txt h3 { font-size: 1.2rem; }
.breaker-txt p { margin: 2px 0 10px; color: var(--suave); }
.orden-wrap { display: grid; gap: 6px; animation: entrar 220ms; }
.sin-orden-nota { display: inline-flex; align-items: center; gap: 8px; background: #EEF1F8; color: var(--cobalto-2); padding: 8px 12px; border-radius: 8px; font-weight: 500; animation: entrar 220ms; }

/* ---------- Series instaladas ---------- */
.series-lista { display: grid; gap: 10px; }
.serie-fila {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) minmax(0, 1.2fr) 38px; gap: 10px; align-items: start;
  padding: 10px; border-radius: 10px; background: #F8FAFD; border: 1px solid var(--linea);
  animation: filaEntra 260ms cubic-bezier(.2, .7, .2, 1);
}
.serie-fila.alerta { background: var(--rojo-bg); border-color: #F3B4B6; animation: pulsoRojo 1.4s ease-out 1; }
@keyframes filaEntra { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
@keyframes pulsoRojo { 0% { box-shadow: 0 0 0 0 rgba(229, 72, 77, .45); } 100% { box-shadow: 0 0 0 12px rgba(229, 72, 77, 0); } }
.serie-fila .num { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--cobalto); color: #fff; font: 600 .9rem 'Barlow Condensed'; margin-top: 6px; }
.serie-fila .alertas { grid-column: 2 / -1; display: grid; gap: 4px; }
.vacio-mini { color: var(--suave); padding: 14px; border: 1.5px dashed var(--linea); border-radius: 10px; text-align: center; }

/* ---------- Mano de obra ---------- */
.buscador { position: relative; }
.buscador .resultados {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); background: #fff; border: 1px solid var(--linea);
  border-radius: 10px; box-shadow: 0 16px 40px rgba(14, 26, 58, .18); max-height: 340px; overflow: auto; animation: entrar 160ms;
}
.res-item { display: grid; grid-template-columns: 70px 1fr auto; gap: 10px; padding: 10px 12px; cursor: pointer; border-bottom: 1px solid #F0F2F7; align-items: center; }
.res-item:hover, .res-item.sel { background: #F3F7FF; }
.res-item .cod, .cod-badge { font: 700 .92rem 'Barlow Condensed'; color: var(--cobalto); background: #FFF2C9; border-radius: 6px; padding: 2px 7px; display: inline-block; letter-spacing: .03em; }
.res-item .det { color: var(--suave); font-size: .82rem; }
.mo-lista { display: grid; gap: 8px; margin-top: 12px; }
.mo-fila { display: grid; grid-template-columns: auto minmax(0, 1fr) auto 96px auto auto; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--linea); border-radius: 10px; background: #fff; animation: filaEntra 240ms; }
.mo-fila .nom { font-weight: 600; }
.mo-fila .det { color: var(--suave); font-size: .82rem; }
.mo-fila .input { padding: 6px 8px; text-align: center; }
.link-alcance { background: none; border: 0; color: var(--cian); font-weight: 600; cursor: pointer; padding: 4px 6px; border-radius: 6px; }
.link-alcance:hover { background: #E7F7FA; }

/* ---------- Ejecuta ---------- */
.ejecuta-chip { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 999px; background: var(--cobalto); color: #fff; font-weight: 600; width: fit-content; }
.avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--amarillo); color: var(--cobalto); font: 700 .9rem 'Barlow Condensed'; }

/* ---------- Tablero ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 18px; }
.kpi { background: var(--papel); border: 1px solid var(--linea); border-radius: 14px; padding: 16px 18px; position: relative; overflow: hidden; }
.kpi .v { font: 700 2.3rem 'Barlow Condensed'; line-height: 1; color: var(--cobalto); }
.kpi .l { color: var(--suave); font-size: .9rem; margin-top: 4px; }
.kpi.amarillo { background: var(--cobalto); border-color: var(--cobalto); }
.kpi.amarillo .v { color: var(--amarillo); }
.kpi.amarillo .l { color: #B9C5E4; }
.kpi.alerta .v { color: var(--rojo); }
.kpi.av .v { color: var(--naranja); }
.barras { display: flex; align-items: flex-end; gap: 4px; height: 150px; padding-top: 10px; }
.barra { flex: 1; background: var(--cian); border-radius: 4px 4px 0 0; min-height: 3px; position: relative; transform-origin: bottom; animation: crece 600ms cubic-bezier(.2, .7, .2, 1) both; }
.barra:hover { background: var(--cobalto-3); }
.barra:hover::after { content: attr(data-t); position: absolute; bottom: 100%; left: 50%; transform: translate(-50%, -4px); background: var(--cobalto); color: #fff; font-size: .75rem; padding: 3px 7px; border-radius: 5px; white-space: nowrap; }
@keyframes crece { from { transform: scaleY(0); } }
.top-tipos { display: grid; gap: 10px; }
.top-tipos .t { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; font-size: .92rem; }
.top-tipos .track { grid-column: 1 / -1; height: 8px; background: #EEF1F8; border-radius: 99px; overflow: hidden; }
.top-tipos .fill { height: 100%; background: var(--amarillo); border-radius: 99px; animation: llenar 700ms cubic-bezier(.2, .7, .2, 1) both; transform-origin: left; }
@keyframes llenar { from { transform: scaleX(0); } }
.tablero-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; align-items: start; }
.tablero-grid .panel { margin-top: 0; }

/* ---------- Listado ---------- */
.filtros { display: grid; grid-template-columns: 2fr repeat(7, minmax(0, 1fr)); gap: 10px; align-items: end; }
.filtros .campo label { font-size: .8rem; }
.filtros .input { padding: 8px 10px; }
.tabla-wrap { overflow: auto; border-radius: 12px; border: 1px solid var(--linea); background: #fff; margin-top: 14px; }
table.tabla { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabla th { text-align: left; background: #EEF1F8; color: var(--cobalto-2); font-weight: 600; padding: 10px 12px; position: sticky; top: 0; white-space: nowrap; }
.tabla td { padding: 10px 12px; border-top: 1px solid #EEF1F6; vertical-align: top; }
.tabla tbody tr { transition: background var(--t); }
.tabla tbody tr:hover { background: #F7F9FD; }
.tabla td .mono, .tabla b.mono { font-size: .84rem; word-break: break-all; display: inline-block; max-width: 170px; }
.tabla .obs { max-width: 320px; color: var(--suave); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tag { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: .78rem; font-weight: 600; white-space: nowrap; }
.tag.dig { background: var(--verde-bg); color: var(--verde); }
.tag.pen { background: var(--naranja-bg); color: var(--naranja); }
.tag.sin { background: #EEF1F8; color: var(--suave); }
.tag.adm { background: #FFF2C9; color: #8A6200; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chip-serie { background: #EEF6F8; color: #0E6B79; padding: 1px 7px; border-radius: 5px; font-size: .8rem; word-break: break-all; }
.paginacion { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; color: var(--suave); flex-wrap: wrap; }
.vacio { text-align: center; padding: 50px 20px; color: var(--suave); }
.vacio h3 { color: var(--texto); margin-bottom: 6px; }
.tarjetas-reg { display: none; }

/* ---------- Modal ---------- */
.modal-fondo { position: fixed; inset: 0; background: rgba(9, 16, 38, .55); display: grid; place-items: center; z-index: 100; padding: 16px; animation: aparecer 180ms; backdrop-filter: blur(2px); }
.modal { background: #fff; border-radius: 16px; width: min(640px, 100%); max-height: 88vh; overflow: auto; box-shadow: 0 30px 80px rgba(0, 0, 0, .35); animation: modalIn 240ms cubic-bezier(.2, .9, .3, 1.2); }
.modal.ancho { width: min(980px, 100%); }
.modal-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 18px 22px; border-bottom: 1px solid var(--linea); position: sticky; top: 0; background: #fff; z-index: 2; }
.modal-cuerpo { padding: 20px 22px; }
.modal-pie { padding: 14px 22px 20px; display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.modal.peligro .modal-cab { background: var(--rojo-bg); border-color: #F3C1C3; }
@keyframes aparecer { from { opacity: 0; } }
@keyframes modalIn { from { opacity: 0; transform: translateY(14px) scale(.96); } }
.alcance-txt { white-space: pre-wrap; line-height: 1.6; }
.ficha { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 14px; }
.ficha span { background: #EEF1F8; border-radius: 6px; padding: 3px 9px; font-size: .85rem; }
.lista-alertas { display: grid; gap: 8px; }
.lista-alertas li { list-style: none; background: var(--rojo-bg); border-left: 4px solid var(--rojo); padding: 10px 12px; border-radius: 6px; }
.lista-alertas { padding: 0; margin: 0; }

/* ---------- Toasts ---------- */
.toasts { position: fixed; right: 18px; bottom: 18px; display: grid; gap: 8px; z-index: 200; }
.toast { background: var(--cobalto); color: #fff; padding: 12px 16px; border-radius: 10px; box-shadow: 0 12px 30px rgba(0, 0, 0, .25); min-width: 240px; max-width: 380px; display: flex; gap: 10px; align-items: flex-start; animation: toastIn 300ms cubic-bezier(.2, .9, .3, 1.2); border-left: 5px solid var(--amarillo); }
.toast.err { border-left-color: var(--rojo); }
.toast.ok { border-left-color: #36E07F; }
.toast.sale { animation: toastOut 250ms forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateX(40px); } }
@keyframes toastOut { to { opacity: 0; transform: translateX(40px); } }

/* ---------- Login ---------- */
.login { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; background: var(--fondo); }
.login-arte { background: var(--cobalto); color: #fff; padding: 48px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.login-arte h1 { font-size: clamp(2.4rem, 4vw, 3.6rem); max-width: 12ch; }
.login-arte p { color: #B9C5E4; max-width: 40ch; font-size: 1.05rem; }
.onda { position: absolute; left: 0; right: 0; top: 34%; width: 100%; height: 160px; }
.login-arte > div { position: relative; z-index: 1; }
.onda path { fill: none; stroke: var(--amarillo); stroke-width: 3; stroke-dasharray: 1600; stroke-dashoffset: 1600; animation: trazar 2.2s cubic-bezier(.6, .1, .2, 1) forwards; }
.onda path.b { stroke: var(--cian); stroke-width: 2; opacity: .7; animation-delay: .35s; }
@keyframes trazar { to { stroke-dashoffset: 0; } }
.login-form { display: grid; place-items: center; padding: 32px 20px; }
.login-form form { width: min(380px, 100%); display: grid; gap: 16px; }
.login-form h2 { font-size: 1.8rem; }

/* ---------- Catálogo mano de obra ---------- */
.mo-cat { display: grid; gap: 8px; }
.mo-cat details { border: 1px solid var(--linea); border-radius: 10px; background: #fff; }
.mo-cat summary { display: grid; grid-template-columns: 76px 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; cursor: pointer; list-style: none; }
.mo-cat summary::-webkit-details-marker { display: none; }
.mo-cat details[open] summary { border-bottom: 1px solid var(--linea); background: #FAFBFE; border-radius: 10px 10px 0 0; }
.mo-cat .cuerpo { padding: 14px; animation: entrar 200ms; }
.precio { font: 600 1rem 'Barlow Condensed'; color: var(--verde); white-space: nowrap; }

/* ---------- Carga de archivos ---------- */
.soltar { border: 2px dashed #B7C2D8; border-radius: 14px; padding: 34px; text-align: center; cursor: pointer; transition: border-color var(--t), background var(--t); color: var(--suave); }
.soltar:hover, .soltar.sobre { border-color: var(--cian); background: #F1FBFD; }
.cargando { display: inline-block; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: girar .7s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }


/* ===================== v1.1 ===================== */
/* Navegación: contador de pendientes, instalar, versión */
.badge { margin-left: auto; background: var(--amarillo); color: var(--cobalto); font: 700 .78rem 'Barlow Condensed'; min-width: 22px; height: 20px; border-radius: 99px; display: grid; place-items: center; padding: 0 6px; animation: aparecer 300ms; }
.btn-instalar { margin-top: 10px; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 10px; border-radius: 10px; border: 1.5px dashed #FFC53188; background: transparent; color: var(--amarillo); font-weight: 600; cursor: pointer; }
.btn-instalar:hover { background: #FFC5311A; }
.btn-instalar svg { width: 18px; height: 18px; }
.version { margin-top: 8px; background: none; border: 0; color: #6F82B3; font-size: .78rem; cursor: pointer; padding: 4px; }
.version:hover { color: #fff; }
.kpi.verde .v { color: var(--verde); font-size: clamp(1.4rem, 2vw, 1.9rem); white-space: nowrap; }
.kpi-link { text-decoration: none; color: inherit; transition: transform var(--t), box-shadow var(--t); }
.kpi-link:hover { transform: translateY(-2px); box-shadow: var(--sombra); }
.precio { font: 600 1rem 'Barlow Condensed'; color: var(--verde); white-space: nowrap; }
.precios-par { display: grid; text-align: right; line-height: 1.1; }
.precios-par small { color: var(--naranja); font-size: .78rem; }
sup.extra { background: var(--naranja); color: #fff; border-radius: 4px; padding: 0 3px; margin-left: 3px; font-size: .62rem; vertical-align: super; }

/* Interruptor de configuración */
.switch { width: 52px; height: 30px; border-radius: 99px; border: 0; background: #C9D1E2; position: relative; cursor: pointer; transition: background var(--t); flex: none; }
.switch span { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.25); transition: left 220ms cubic-bezier(.5, 1.6, .4, 1); }
.switch.on { background: var(--verde); }
.switch.on span { left: 25px; }

/* Tarifas y precios en el formulario */
.segmentos.tarifa button.on[data-v="E"], .segmentos.mini button.on[data-v="E"] { background: var(--naranja); }
.segmentos.mini { padding: 2px; gap: 2px; }
.segmentos.mini button { padding: 4px 8px; font-size: .8rem; }
.mo-lista.con-precio .mo-fila { grid-template-columns: auto minmax(0, 1fr) auto 96px 110px auto auto; }
.precio-linea { text-align: right; font: 600 .98rem 'Barlow Condensed'; color: var(--cobalto); line-height: 1.1; }
.precio-linea small { display: block; color: var(--verde); font-size: .85rem; }
.mo-total { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding: 14px 16px; border-radius: 12px; background: var(--cobalto); color: #fff; }
.mo-total:empty { display: none; }
.mo-total small { color: #9FB0D8; }
.mo-total b { font: 700 1.6rem 'Barlow Condensed'; color: var(--amarillo); }
.mo-total.pulso b { animation: rebote 360ms cubic-bezier(.3, 1.6, .5, 1); }
@keyframes rebote { 0% { transform: scale(.92); } 100% { transform: none; } }

/* Toast con acción */
.toast-btn { background: transparent; border: 1px solid #FFFFFF55; color: var(--amarillo); border-radius: 6px; padding: 3px 10px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.toast-btn:hover { background: #FFFFFF1A; }

/* Checklist de digitado */
.progreso-panel { display: grid; gap: 10px; }
.progreso-txt { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.progreso-txt b { font: 700 2.2rem 'Barlow Condensed'; color: var(--cobalto); line-height: 1; }
.progreso-txt span { color: var(--suave); }
.progreso { height: 12px; background: #EEF1F8; border-radius: 99px; overflow: hidden; }
.progreso-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--cian), var(--verde)); border-radius: 99px; transition: width 700ms cubic-bezier(.2, .7, .2, 1); }
.progreso-fill.completo { background: var(--verde); box-shadow: 0 0 12px #1F9D6366; }
.filtros.dig { grid-template-columns: 2fr 1fr 1fr 1fr auto; }
.checklist { display: grid; gap: 10px; margin-top: 16px; }
.chk-item { display: grid; grid-template-columns: auto 1fr; gap: 16px; background: #fff; border: 1px solid var(--linea); border-left: 5px solid var(--naranja); border-radius: 12px; padding: 14px 16px; transition: border-color 300ms, background 300ms, opacity 300ms; animation: filaEntra 260ms cubic-bezier(.2, .7, .2, 1); }
.chk-item.hecho { border-left-color: var(--verde); background: #FAFDFB; }
.chk-item.saliendo { animation: salir 380ms forwards; }
@keyframes salir { to { opacity: 0; transform: translateX(30px); height: 0; padding-top: 0; padding-bottom: 0; margin: 0; } }
.chk-box { width: 40px; height: 40px; border-radius: 10px; border: 2.5px solid #B7C2D8; background: #fff; cursor: pointer; display: grid; place-items: center; padding: 0; transition: background 200ms, border-color 200ms, transform 120ms; }
.chk-box:hover { border-color: var(--verde); }
.chk-box:active { transform: scale(.9); }
.chk-box svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; }
.chk-item.hecho .chk-box { background: var(--verde); border-color: var(--verde); }
.chk-item.hecho .chk-box svg { animation: dibujar 320ms 60ms forwards; }
@keyframes dibujar { to { stroke-dashoffset: 0; } }
.chk-cuerpo { display: grid; gap: 6px; min-width: 0; }
.chk-linea1 { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.chk-fecha { font: 600 1.05rem 'Barlow Condensed'; color: var(--cobalto); }
.chk-linea2 { color: var(--suave); }
.chk-pie { display: flex; gap: 10px; align-items: center; justify-content: space-between; color: var(--suave); font-size: .88rem; flex-wrap: wrap; }
.chk-quien { color: var(--verde); font-weight: 500; margin-left: auto; }
.chk-obs summary { cursor: pointer; color: var(--cian); font-weight: 600; font-size: .88rem; }
.chk-obs p { margin: 6px 0 0; white-space: pre-wrap; }
.copiable { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--linea); background: #F8FAFD; border-radius: 6px; padding: 2px 8px; cursor: pointer; font: inherit; font-size: .85rem; word-break: break-all; text-align: left; transition: background var(--t), border-color var(--t); }
.copiable:hover { border-color: var(--cian); background: #E7F7FA; }
.copiable svg { flex: none; opacity: .55; }
.copiable.orden { font-weight: 700; color: var(--cobalto); }
.copiable.serie { color: #0E6B79; background: #EEF6F8; }
.copiable.copiado { background: var(--verde-bg); border-color: var(--verde); }

/* Aviso de nueva versión */
.aviso-version { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 300; display: flex; align-items: center; gap: 14px; background: var(--cobalto); color: #fff; padding: 12px 14px 12px 18px; border-radius: 14px; box-shadow: 0 18px 50px rgba(0,0,0,.35); border: 1px solid #FFC53155; animation: subir 420ms cubic-bezier(.2, .9, .3, 1.2); max-width: calc(100% - 24px); }
.aviso-version > span { color: var(--amarillo); display: grid; }
.aviso-version div div { color: #B9C5E4; font-size: .88rem; }
.aviso-version .btn-ico { color: #B9C5E4; }
@keyframes subir { from { opacity: 0; transform: translate(-50%, 30px); } }
.nota + .nota { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--linea); }
.nota-cab { display: flex; gap: 10px; align-items: center; }
.nota ul, .pasos { margin: 8px 0 0; padding-left: 20px; line-height: 1.6; }

@media (max-width: 1100px) { .filtros.dig { grid-template-columns: 1fr 1fr; } .filtros.dig .campo:first-child { grid-column: 1 / -1; } }
@media (max-width: 820px) {
  .aviso-version { bottom: 84px; flex-wrap: wrap; }
  .chk-item { grid-template-columns: 1fr; position: relative; padding-left: 64px; }
  .chk-box { position: absolute; left: 12px; top: 14px; }
}

/* v1.2: cantidad de servicios y departamento */
.cant-wrap { display: grid; gap: 2px; }
.cant-wrap span { font-size: .72rem; font-weight: 600; color: var(--suave); text-align: center; white-space: nowrap; }
.tabla .dep { font-size: .8rem; color: var(--cian); font-weight: 600; }

/* ---------- Móvil ---------- */
.barra-movil { display: none; }
@media (max-width: 1100px) {
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .filtros { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .filtros .campo:first-child { grid-column: 1 / -1; }
  .tablero-grid { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .app { grid-template-columns: 1fr; }
  .lateral { display: none; }
  main { padding: 18px 14px 96px; }
  .barra-movil {
    display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
    background: var(--cobalto); padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .barra-movil a { display: flex; flex-direction: column; align-items: center; gap: 2px; color: #AFBCE0; text-decoration: none; font-size: .72rem; padding: 6px 2px; border-radius: 8px; }
  .barra-movil a.activo { color: var(--amarillo); }
  .barra-movil a.nuevo { background: var(--amarillo); color: var(--cobalto); font-weight: 700; margin: 0 4px; }
  .barra-movil svg { width: 22px; height: 22px; }
  .g2, .g3 { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpis .kpi:first-child { grid-column: 1 / -1; }
  .filtros { grid-template-columns: 1fr 1fr; }
  .serie-fila { grid-template-columns: 30px minmax(0, 1fr) 36px; }
  .serie-fila .desc-campo { grid-column: 2 / 3; }
  .serie-fila .serie-campo { grid-column: 2 / 3; }
  .serie-fila .quitar { grid-row: 1; grid-column: 3; }
  .tabla-wrap.reg { display: none; }
  .tarjetas-reg { display: grid; gap: 10px; margin-top: 14px; }
  .tarjeta-reg { background: #fff; border: 1px solid var(--linea); border-radius: 12px; padding: 14px; animation: entrar 240ms; }
  .tarjeta-reg .top { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
  .login { grid-template-columns: 1fr; }
  .login-arte { min-height: 260px; padding: 28px; }
  .onda { top: 70px; height: 80px; opacity: .5; }
  .cabecera .btn { flex: 1; }
  .toasts { left: 12px; right: 12px; bottom: 84px; }
  .breaker-zona { grid-template-columns: auto 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .onda path { stroke-dashoffset: 0; }
}

@media (max-width: 820px) {
  .mo-fila, .mo-lista.con-precio .mo-fila { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "cod info quitar" "tar cant precio" "alc alc alc"; row-gap: 8px; }
  .mo-fila > .cod-badge { grid-area: cod; align-self: start; }
  .mo-fila > .info { grid-area: info; }
  .mo-fila > .btn-ico { grid-area: quitar; align-self: start; }
  .mo-fila > .segmentos { grid-area: tar; }
  .mo-fila > .cant-wrap { grid-area: cant; width: 96px; justify-self: start; }
  .mo-fila > .precio-linea { grid-area: precio; }
  .mo-fila > .link-alcance { grid-area: alc; justify-self: start; padding-left: 0; }
}
@media (max-width: 820px) {
  .mo-fila > .cod-badge { justify-self: start; }
  .mo-total { flex-wrap: wrap; gap: 4px; }
  .mo-total b { font-size: 1.35rem; }
  .filtros.dig .campo:last-child { grid-column: 1 / -1; }
  .filtros.dig .segmentos { flex-wrap: nowrap; }
}