/* TALINETZ 2 · estilos de la app (diseño aprobado: azul marino + naranja, Barlow) */
:root {
  --navy: #0B2238; --navy2: #13325A; --navy3: #2A4870; --amber: #F2A33A; --amber-bg: #FFF1DC; --amber-ink: #7A4A00;
  --ink: #0F1B2A; --muted: #4A5868; --line: #DCE2E9; --line2: #C9D2DC; --ground: #F2F4F7; --soft: #EEF2F6; --card: #FFFFFF;
  --ok: #1E6B45; --ok-bg: #E3F3EA; --err: #A3261C; --err-bg: #FDE4E2; --info: #1D4F91; --info-bg: #E3ECF7; --sub-on-navy: #B9C6D6;
  --r: 16px; --r-sm: 12px;
  --f: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fc: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;
  --fm: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  --safe-b: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 16px/1.4 var(--f); -webkit-tap-highlight-color: transparent; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--navy2); }
img { max-width: 100%; display: block; }
h1, h2, h3 { margin: 0; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Estructura ---------- */
.app { min-height: 100vh; min-height: 100dvh; display: flex; }
.sidebar { display: none; }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.vista { flex: 1; display: flex; flex-direction: column; padding-bottom: calc(76px + var(--safe-b)); }
.contenido { padding: 16px; display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 760px; margin: 0 auto; }
.contenido.ancho { max-width: 1400px; }

.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: #fff; border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); padding: 6px 6px calc(10px + var(--safe-b)); }
.tabbar a { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0; font-size: 12px; font-weight: 500;
  color: var(--muted); text-decoration: none; border-radius: 10px; }
.tabbar a.activo { color: var(--navy); font-weight: 700; }
.tabbar a.activo svg { stroke-width: 2.2; }

@media (min-width: 900px) {
  .sidebar { display: flex; flex-direction: column; gap: 22px; width: 240px; flex: 0 0 240px; background: var(--navy); color: #fff;
    padding: 20px 14px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
  .tabbar { display: none; }
  .vista { padding-bottom: 24px; }
  .contenido { padding: 24px 28px; }
}
.marca { display: flex; align-items: center; gap: 10px; padding: 0 6px; color: #fff; text-decoration: none; }
.logo { width: 36px; height: 36px; border-radius: 10px; background: var(--amber); color: var(--navy); display: grid; place-items: center;
  font: 700 21px var(--fc); flex: 0 0 auto; }
.marca b { font: 700 21px var(--fc); letter-spacing: .04em; display: block; }
.marca small { font-size: 11.5px; color: var(--sub-on-navy); }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a { height: 42px; padding: 0 12px; border-radius: 10px; display: flex; align-items: center; gap: 10px; color: #D5DEE8;
  text-decoration: none; font-size: 15px; font-weight: 500; }
.nav a:hover { background: rgba(255,255,255,.06); }
.nav a.activo { background: var(--navy2); color: #fff; font-weight: 700; }
.nav a.activo svg { stroke: var(--amber); }
.nav .sep { height: 1px; background: var(--navy3); margin: 8px 6px; }
.sidebar-pie { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 8px 6px; color: #fff; text-decoration: none; }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 14px; color: #fff; background: var(--navy2); flex: 0 0 auto; }
.sidebar-pie small { display: block; color: var(--sub-on-navy); font-size: 12px; }

/* ---------- Cabeceras ---------- */
.cab { background: var(--navy); color: #fff; padding: 18px 16px 20px; display: flex; flex-direction: column; gap: 14px; }
.cab-in { width: 100%; max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.cab .sub { color: var(--sub-on-navy); font-size: 14px; }
.cab h1 { font-size: 23px; font-weight: 700; line-height: 1.15; }
.fila { display: flex; align-items: center; gap: 10px; }
.entre { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.btn-ico { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--navy3); background: var(--navy2); color: #fff;
  display: grid; place-items: center; cursor: pointer; text-decoration: none; flex: 0 0 auto; }
.btn-ico.claro { background: var(--ground); border-color: transparent; color: var(--navy); }
.cab-simple { background: #fff; border-bottom: 1px solid var(--line); padding: 12px 16px; position: sticky; top: 0; z-index: 20; }
.cab-simple .cab-in { flex-direction: row; align-items: center; gap: 12px; }
.cab-simple h1 { font-size: 19px; }
.cab-simple .sub { color: var(--muted); font-size: 13.5px; }
.titulo-pag { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; }
.titulo-pag h1 { font: 700 34px/1.05 var(--fc); color: var(--navy); }
.eyebrow { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* ---------- Tarjetas y piezas ---------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.card.elevada { box-shadow: 0 6px 18px rgba(11,34,56,.08); padding: 16px; }
.card-tit { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.stat { background: var(--navy2); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; }
.stat b { font: 700 28px/1 var(--fc); }
.stat span { font-size: 12.5px; color: var(--sub-on-navy); }
.hora-grande { font: 700 30px/1 var(--fc); color: var(--navy); }
.hora-grande small { font-size: 18px; color: var(--muted); }
.dir { font-size: 18px; font-weight: 600; }
.muted { color: var(--muted); }
.peq { font-size: 13px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-mono { font: 500 12.5px var(--fm); background: var(--soft); border-radius: 8px; padding: 5px 8px; }
.pill { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.pill.pendiente { background: var(--amber-bg); color: var(--amber-ink); }
.pill.en_curso { background: var(--info-bg); color: var(--info); }
.pill.completado { background: var(--ok-bg); color: var(--ok); }
.pill.cancelado { background: var(--soft); color: var(--muted); }
.pill.oscura { background: var(--amber-bg); color: var(--amber-ink); }

.btn { min-height: 48px; padding: 0 16px; border-radius: 12px; border: 1.5px solid var(--navy); background: #fff; color: var(--navy);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; font-size: 15.5px; text-decoration: none; cursor: pointer; }
.btn.primario { background: var(--navy); color: #fff; }
.btn.naranja { background: var(--amber); border-color: var(--amber); color: var(--navy); font-weight: 700; }
.btn.verde { background: var(--ok); border-color: var(--ok); color: #fff; font-weight: 700; }
.btn.peligro { border-color: var(--err); color: var(--err); }
.btn.suave { border-color: var(--line2); }
.btn.grande { min-height: 54px; font-size: 17px; border-radius: 14px; width: 100%; }
.btn.chico { min-height: 38px; font-size: 14px; padding: 0 12px; border-radius: 10px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.oscuro { background: var(--navy2); border-color: var(--navy2); color: #fff; min-height: 46px; font-size: 14.5px; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }

.item { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; display: flex; align-items: center; gap: 12px;
  text-decoration: none; color: inherit; }
.item:hover { border-color: var(--line2); }
.item .h { font: 700 20px var(--fc); min-width: 52px; color: var(--navy); flex: 0 0 auto; white-space: nowrap; }
.item .cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.item .t { font-size: 15.5px; font-weight: 600; line-height: 1.25; overflow-wrap: break-word; hyphens: auto; }
.item.hecho { opacity: .72; }
.item.hecho .t { text-decoration: line-through; }
.lista { display: flex; flex-direction: column; gap: 8px; }

.datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.dato { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dato > span { font-size: 12.5px; color: var(--muted); }
.dato > b { font: 600 16px var(--fm); word-break: break-word; }
.dato > b.grande { font-size: 22px; color: var(--navy); }
.dato > b.texto { font-family: var(--f); font-size: 15px; }
.dato.ancho { grid-column: 1 / -1; background: var(--ground); border-radius: 10px; padding: 8px 10px; }

.contacto { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--soft); }
.contacto:last-child { border-bottom: 0; }

/* Fotos */
.fotos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.foto { aspect-ratio: 1; border-radius: 12px; overflow: hidden; position: relative; background: var(--navy2); border: 0; padding: 0; cursor: pointer; }
.foto img { width: 100%; height: 100%; object-fit: cover; }
.foto .etq { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 6px 5px; font-size: 11.5px; font-weight: 600; color: #fff; text-align: left;
  background: linear-gradient(transparent, rgba(11,34,56,.85)); }
.foto .ok { position: absolute; top: 5px; right: 5px; width: 20px; height: 20px; border-radius: 50%; background: #2E9E66; display: grid; place-items: center; }
.foto-add { aspect-ratio: 1; border-radius: 12px; border: 1.5px dashed #9AA8B8; background: var(--ground); color: var(--muted); font-size: 11.5px; font-weight: 600;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; padding: 4px; text-align: center; }
.foto-add.falta { border-color: #C26D00; background: #FFF6E9; color: var(--amber-ink); font-weight: 700; }
.foto-add.subiendo { border-style: solid; }
.foto-add small { font-size: 10.5px; font-weight: 500; opacity: .85; }
.foto-add span { line-height: 1.15; }
.punto-fibra { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; vertical-align: -1px; box-shadow: 0 0 0 1.5px rgba(255,255,255,.9); }
.punto-fibra.grande { width: 20px; height: 20px; margin: 0; box-shadow: 0 0 0 1.5px #9AA8B8; }

/* Formularios */
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo label, .etiqueta { font-size: 13px; font-weight: 600; color: var(--muted); }
.input { width: 100%; min-height: 48px; border: 1px solid var(--line2); border-radius: 12px; padding: 0 12px; background: #fff; font-size: 16px; }
textarea.input { padding: 10px 12px; min-height: 80px; resize: vertical; }
.input:focus, .btn:focus-visible, a:focus-visible, button:focus-visible { outline: 3px solid rgba(242,163,58,.6); outline-offset: 1px; }
.stepper { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.stepper button { width: 44px; height: 44px; border-radius: 12px; border: 0; background: var(--soft); color: var(--navy); font-size: 22px; font-weight: 700; cursor: pointer; }
.stepper input { width: 80px; border: 0; background: transparent; text-align: center; font: 700 30px var(--fc); color: var(--navy); }
.stepper input:focus { outline: none; border-bottom: 2px solid var(--amber); }
.opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.opcion { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--line2); background: #fff; display: inline-flex; align-items: center;
  font-size: 14.5px; font-weight: 500; cursor: pointer; }
.opcion.sel { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 600; }
.buscador { position: relative; }
.buscador svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.buscador .input { padding-left: 40px; }

.pie-accion { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; background: #fff; border-top: 1px solid var(--line);
  padding: 12px 16px calc(14px + var(--safe-b)); display: flex; flex-direction: column; gap: 8px; }
.pie-accion > * { width: 100%; max-width: 728px; margin: 0 auto; }
.con-pie .vista { padding-bottom: calc(110px + var(--safe-b)); }
.con-pie .tabbar { display: none; }
@media (min-width: 900px) { .pie-accion { left: 240px; } }

/* Mensajes */
.aviso { border-radius: 12px; padding: 12px 14px; font-size: 14.5px; }
.aviso.error { background: var(--err-bg); color: var(--err); }
.aviso.ok { background: var(--ok-bg); color: var(--ok); }
.aviso.info { background: var(--info-bg); color: var(--info); }
.aviso.naranja { background: var(--amber-bg); color: var(--amber-ink); }
.vacio { text-align: center; color: var(--muted); padding: 32px 16px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.vacio svg { color: #9AA8B8; }
#toasts { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(90px + var(--safe-b)); z-index: 100; display: flex; flex-direction: column; gap: 8px;
  width: min(92vw, 420px); pointer-events: none; }
.toast { background: var(--navy); color: #fff; border-radius: 12px; padding: 12px 14px; font-size: 14.5px; box-shadow: 0 8px 24px rgba(0,0,0,.25); animation: entra .2s ease-out; }
.toast.error { background: var(--err); }
.toast.ok { background: var(--ok); }
@keyframes entra { from { opacity: 0; transform: translateY(8px); } }
.cargando { display: grid; place-items: center; padding: 48px; color: var(--muted); }
.spin { width: 28px; height: 28px; border: 3px solid var(--line); border-top-color: var(--navy); border-radius: 50%; animation: gira .8s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.barra-prog { height: 4px; background: var(--soft); border-radius: 2px; overflow: hidden; }
.barra-prog i { display: block; height: 100%; background: var(--amber); width: 0; transition: width .2s; }

/* Visor de fotos */
.visor { position: fixed; inset: 0; z-index: 90; background: rgba(5,14,24,.94); display: flex; flex-direction: column; }
.visor-barra { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; color: #fff; gap: 8px; }
.visor-img { flex: 1; display: grid; place-items: center; padding: 8px; min-height: 0; }
.visor-img img { max-height: 100%; max-width: 100%; object-fit: contain; border-radius: 6px; }

/* Login */
.login { min-height: 100vh; min-height: 100dvh; background: var(--navy); display: grid; place-items: center; padding: 16px; }
.login form { width: 100%; max-width: 380px; background: #fff; border-radius: 20px; padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.login .marca { color: var(--navy); padding: 0; margin-bottom: 4px; }
.login .marca small { color: var(--muted); }

/* Detalles plegables */
details.card > summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; }
details.card > summary::-webkit-details-marker { display: none; }
.hist { font-size: 13.5px; display: flex; flex-direction: column; gap: 8px; }
.hist div { display: flex; flex-direction: column; border-left: 3px solid var(--line); padding-left: 10px; }
.filtros { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.filtros .opcion { flex: 0 0 auto; }
.grupo-dia { font-size: 13px; font-weight: 700; color: var(--muted); margin: 6px 2px 0; }

/* Ventanas emergentes */
.modal-fondo { position: fixed; inset: 0; z-index: 80; background: rgba(5,14,24,.55); display: flex; align-items: flex-end; justify-content: center; }
.modal { background: #fff; width: 100%; max-width: 520px; max-height: 92vh; overflow-y: auto; border-radius: 20px 20px 0 0; padding: 18px 16px calc(18px + var(--safe-b));
  display: flex; flex-direction: column; gap: 14px; animation: sube .18s ease-out; }
.modal:focus { outline: none; }
.modal-acciones { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.modal-acciones .btn { flex: 1 1 140px; }
@media (min-width: 700px) { .modal-fondo { align-items: center; } .modal { border-radius: 20px; } }
@keyframes sube { from { transform: translateY(24px); opacity: 0; } }

/* Planificación */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.kpi { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 1px; }
.kpi b { font: 700 30px/1.1 var(--fc); color: var(--navy); }
.kpi span { font-size: 13px; color: var(--muted); }
.kpi.alerta { background: #FFF6E9; border-color: #F3D5A6; }
.kpi.alerta b, .kpi.alerta span { color: var(--amber-ink); }
.tablero-caja { overflow-x: auto; padding-bottom: 6px; margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
.tablero { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(215px, 1fr); gap: 12px; min-width: min-content; }
.columna { background: #E9EDF2; border: 1px solid var(--line); border-radius: 16px; padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 220px; transition: background .15s; }
.columna.sin { background: #FFF6E9; border-color: #F3D5A6; }
.columna.hoy { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
.columna.encima { background: #DCE6F2; border-style: dashed; border-color: var(--navy2); }
.columna-cab { display: flex; justify-content: space-between; align-items: baseline; padding: 2px 4px 4px; }
.columna-cab b { font-size: 15.5px; }
.tarjeta { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 9px 11px; display: flex; flex-direction: column; gap: 5px;
  box-shadow: 0 1px 2px rgba(11,34,56,.05); cursor: grab; text-align: left; width: 100%; font: inherit; color: inherit; }
.tarjeta:active { cursor: grabbing; }
.tarjeta.arrastrando { opacity: .4; }
.tarjeta.hecha { border-left: 4px solid var(--ok); }
.tarjeta.curso { border-left: 4px solid var(--info); }
.tarjeta.atenuada { opacity: .35; }
.tarjeta .t-h { font: 700 18px var(--fc); color: var(--navy); }
.tarjeta .t-d { font-size: 14px; font-weight: 600; line-height: 1.25; }
.fibra { font: 600 11.5px var(--fm); padding: 3px 7px; border-radius: 7px; }
.fibra.f12 { background: var(--info-bg); color: var(--navy2); }
.fibra.f4 { background: var(--amber-bg); color: var(--amber-ink); }
.op { height: 24px; min-width: 24px; padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; color: #fff; }
@media (min-width: 900px) { .tablero-caja { margin: 0; padding-left: 0; padding-right: 0; } }

/* Formularios en rejilla */
.form-rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.form-rejilla .todo { grid-column: 1 / -1; }
@media (max-width: 560px) { .form-rejilla { grid-template-columns: 1fr; } }
select.input { appearance: auto; }
.tabla-caja { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla th, .tabla td { padding: 9px 8px; border-bottom: 1px solid var(--soft); text-align: left; vertical-align: top; }
.tabla th { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.zona-imagen { border: 2px dashed rgba(29,79,145,.35); border-radius: 14px; background: rgba(29,79,145,.04); padding: 14px; display: flex; flex-direction: column; gap: 4px; cursor: pointer; }
.zona-imagen.encima, .zona-imagen:focus { border-color: var(--info); background: rgba(29,79,145,.09); outline: none; }
.zona-imagen img { max-height: 160px; object-fit: contain; border-radius: 8px; margin-top: 8px; }
.clave-api { font: 600 14px var(--fm); background: var(--ground); border: 1px dashed var(--navy2); border-radius: 10px; padding: 12px; word-break: break-all; user-select: all; }

@media (max-width: 600px) {
  .titulo-pag h1 { font-size: 27px; }
  .kpi b { font-size: 26px; }
}

/* Economía */
.tip { position: absolute; z-index: 5; width: 190px; background: var(--navy); color: #fff; border-radius: 10px; padding: 8px 10px; font-size: 13px;
  display: flex; flex-direction: column; gap: 2px; pointer-events: none; box-shadow: 0 6px 18px rgba(11,34,56,.25); }
.tip b { font-size: 13.5px; }
.tip span { color: var(--sub-on-navy); }
svg rect[tabindex]:focus { outline: none; }

/* Equipo y ajustes */
.colores { display: flex; flex-wrap: wrap; gap: 8px; }
.color-op { width: 36px; height: 36px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1.5px var(--line2); cursor: pointer; padding: 0; }
.color-op.sel { box-shadow: 0 0 0 3px var(--amber); }
.interruptor { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--soft); cursor: pointer; }
.interruptor:last-child { border-bottom: 0; }
.interruptor input { width: 22px; height: 22px; accent-color: var(--navy); flex: 0 0 auto; }
.euro-campo { position: relative; }
.euro-campo .input { padding-right: 34px; text-align: right; font: 600 17px var(--fm); }
.euro-campo span { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); font-weight: 600; }

/* Mapa */
.mapa-caja { position: relative; height: calc(100dvh - 250px); min-height: 360px; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); background: #E9EDF2; }
@media (min-width: 900px) { .mapa-caja { height: calc(100vh - 210px); } }
.mapa-caja .leaflet-container { height: 100%; font: inherit; }
.marcador { width: 30px; height: 30px; border-radius: 50% 50% 50% 4px; transform: rotate(-45deg); display: grid; place-items: center; border: 2.5px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.35); }
.marcador b { transform: rotate(45deg); color: #fff; font: 700 12px var(--fc); }
.marcador.pendiente { background: var(--amber); } .marcador.pendiente b { color: var(--navy); }
.marcador.en_curso { background: var(--info); }
.marcador.completado { background: var(--ok); }
.marcador.cancelado { background: #8795A5; }
.pop { display: flex; flex-direction: column; gap: 4px; min-width: 200px; font-size: 14px; }
.pop > div { display: flex; flex-direction: column; gap: 3px; }
.pop b { font-size: 15px; }
.pop .acc { display: flex; gap: 6px; margin-top: 6px; }
.pop .acc a { flex: 1; text-align: center; padding: 8px; border-radius: 9px; background: var(--navy); color: #fff !important; text-decoration: none; font-weight: 600; font-size: 13.5px; }
.pop .acc a.sec { background: var(--soft); color: var(--navy) !important; }
.leyenda { display: flex; flex-wrap: wrap; gap: 12px; font-size: 13px; color: var(--muted); }
.leyenda i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }

/* Selección múltiple */
.sel-fila { display: flex; align-items: center; gap: 0; }
.sel-fila > .item { flex: 1; min-width: 0; }
.sel-marca { display: none; width: 0; }
.seleccionando .sel-marca { display: grid; place-items: center; width: 40px; flex: 0 0 40px; cursor: pointer; }
.sel-caja { width: 22px; height: 22px; accent-color: var(--navy); cursor: pointer; }
.seleccionando .sel-fila > .item { cursor: pointer; }
.sel-fila.elegido > .item { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); background: #F3F6FB; }
.sel-grupo { display: none; border: 0; background: none; color: var(--navy2); font: 600 13px var(--f); cursor: pointer; padding: 2px 4px; text-decoration: underline; }
.seleccionando .sel-grupo { display: inline; }
.barra-seleccion { gap: 10px; }
.sel-acciones { display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 8px; }
@media (max-width: 560px) { .sel-acciones { grid-template-columns: 1fr 1fr; } .sel-acciones .btn { grid-column: 1 / -1; } }
.grupo-cab { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 6px 2px 0; }
.grupo-cab .grupo-dia { margin: 0; }
.op-cab { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15.5px; }
.op-cab small { font-weight: 500; color: var(--muted); font-size: 13px; }
.grupo-op.sin { background: #FFF6E9; border-color: #F3D5A6; }

/* Visor de PDF */
.visor-pdf .visor-barra { background: #0B2238; }
.pdf-info { font-size: 12.5px; color: var(--sub-on-navy); }
.pdf-paginas { flex: 1; overflow: auto; padding: 8px; display: flex; flex-direction: column; align-items: center; gap: 10px; -webkit-overflow-scrolling: touch; }
.pdf-pagina { background: #fff; border-radius: 4px; box-shadow: 0 2px 10px rgba(0,0,0,.35); flex: 0 0 auto; max-width: none; }
.pdf-pagina canvas { display: block; border-radius: 4px; }