/* ============================================================
   Portal UIP · paleta oficial
   Primario #0345BF · Fondo #EBF3FE · Tarjetas #FFFFFF
   Títulos #0345BF · Subtítulos #1E293B · Texto #5D666F
   ============================================================ */
:root{
  --primario:#0345BF;
  --primario-claro:#2B66E8;
  --primario-oscuro:#02318F;
  --navy-800:#0A2E7A;
  --navy-900:#062257;
  --navy-950:#041838;
  --fondo:#EBF3FE;
  --tarjeta:#FFFFFF;
  --titulos:#0345BF;
  --subtitulos:#1E293B;
  --texto:#5D666F;
  --borde:#D5E3F6;
  --ambar:#F2A92E;
  --exito:#1E9E5A; --info:#2F6FB5; --aviso:#D98A0B; --peligro:#CD4444;
  --radio:10px;
  --sombra:0 1px 2px rgba(6,34,87,.06),0 8px 24px -12px rgba(3,69,191,.18);
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:"Inter",sans-serif;font-size:15.5px;line-height:1.55;color:var(--texto);
  background:
    radial-gradient(900px 480px at 8% -10%, rgba(3,69,191,.12), transparent 60%),
    radial-gradient(700px 420px at 105% 8%, rgba(43,102,232,.10), transparent 55%),
    repeating-linear-gradient(135deg, rgba(3,69,191,.03) 0 1px, transparent 1px 22px),
    var(--fondo);
  min-height:100vh;
}
h1,h2,h3{font-family:"Inter",sans-serif;line-height:1.15;color:var(--titulos)}
a{color:var(--primario)}
svg{vertical-align:middle}
code{font-family:"Inter",monospace;background:#E3EDFD;padding:.1em .4em;border-radius:4px;color:var(--navy-900)}
.muted{color:var(--texto)}

@keyframes aparecer{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes sacudida{0%,100%{transform:none}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@keyframes pulso{0%{box-shadow:0 0 0 0 rgba(30,158,90,.45)}70%{box-shadow:0 0 0 6px transparent}100%{box-shadow:0 0 0 0 transparent}}
[data-anim]{animation:aparecer .5s cubic-bezier(.2,.7,.3,1) both}
.sacudir{animation:sacudida .35s ease}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---- Barra superior ---- */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  padding:.8rem clamp(1rem,4vw,2.5rem);background:rgba(235,243,254,.88);backdrop-filter:blur(8px);border-bottom:1px solid var(--borde)}
.marca{display:inline-flex;align-items:center;gap:.55rem;text-decoration:none;
  font-family:"Inter",sans-serif;font-weight:800;font-size:1.15rem;color:var(--titulos)}
.marca-logo{width:26px;height:26px;color:var(--primario)}
.marca-clara{color:#fff}.marca-clara .marca-logo{color:var(--ambar)}
.topbar-nav{display:flex;align-items:center;gap:1.1rem}
.topbar-nav a:not(.btn){color:var(--texto);text-decoration:none;font-weight:500;transition:color .15s}
.topbar-nav a:not(.btn):hover{color:var(--primario)}

/* ---- Botones ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  font:600 .92rem "Inter",sans-serif;border-radius:8px;border:1px solid transparent;
  padding:.6rem 1.15rem;cursor:pointer;text-decoration:none;
  transition:transform .15s,box-shadow .15s,background .15s,color .15s,border-color .15s}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-primario{background:linear-gradient(180deg,var(--primario-claro),var(--primario));color:#fff;box-shadow:0 2px 0 var(--primario-oscuro)}
.btn-primario:hover{box-shadow:0 2px 0 var(--primario-oscuro),0 8px 18px -8px rgba(3,69,191,.55)}
.btn-ghost{background:transparent;border-color:var(--borde);color:var(--subtitulos)}
.btn-ghost:hover{border-color:var(--primario);color:var(--primario);background:#fff}
.btn-peligro{background:transparent;border-color:#EEC6C6;color:var(--peligro)}
.btn-peligro:hover{background:var(--peligro);border-color:var(--peligro);color:#fff}
.btn-sm{padding:.32rem .7rem;font-size:.82rem}
.btn-lg{padding:.8rem 1.6rem;font-size:1rem}
.btn-bloque{width:100%;margin-top:.6rem}

/* ---- Estructura pública ---- */
.public-main{max-width:1180px;margin:2.2rem auto 3.5rem;padding:0 clamp(1rem,4vw,2rem)}
.public-main--centro{display:flex;justify-content:center}
.public-main--angosta{max-width:860px}
.public-grid{display:grid;grid-template-columns:minmax(330px,5fr) 7fr;gap:2rem;align-items:start}

.panel-marca{position:relative;overflow:hidden;color:#E8F1FF;border-radius:18px 4px 18px 4px;padding:2.4rem 2.2rem;
  background:radial-gradient(420px 260px at 110% -5%, rgba(242,169,46,.22), transparent 60%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.035) 0 1px, transparent 1px 14px),
    linear-gradient(160deg,var(--navy-800),var(--navy-950));box-shadow:var(--sombra)}
.panel-marca-detalle{font:700 .72rem "Inter",monospace;letter-spacing:.22em;text-transform:uppercase;color:var(--ambar)}
.panel-marca-titulo{font-size:clamp(1.7rem,3vw,2.3rem);margin:.6rem 0 .8rem;color:#fff}
.panel-marca-texto{color:#B9C9E6;max-width:38ch}
.pasos{list-style:none;margin:1.8rem 0;display:grid;gap:1rem}
.pasos li{display:flex;gap:.9rem;align-items:flex-start}
.paso-num{font:700 .95rem "Inter",monospace;color:var(--navy-950);background:var(--ambar);border-radius:6px;
  padding:.28rem .5rem;min-width:2.4rem;text-align:center;box-shadow:2px 2px 0 rgba(0,0,0,.25)}
.pasos strong{display:block;color:#fff}
.pasos small{color:#9DB4DC}

/* ---- Tarjetas y formularios ---- */
.tarjeta{background:var(--tarjeta);border:1px solid var(--borde);border-radius:var(--radio);box-shadow:var(--sombra)}
.tarjeta-form{padding:2rem 2.2rem}
.tarjeta-form--estrecha{max-width:760px;width:100%}
.tarjeta-cabecera{margin-bottom:1.4rem}
.tarjeta-cabecera h2{font-size:1.45rem}
.tarjeta-cabecera-fila{display:flex;align-items:center;justify-content:space-between}
.etiqueta-seccion{display:inline-block;font:700 .68rem "Inter",monospace;letter-spacing:.2em;text-transform:uppercase;
  color:var(--primario);background:#DFEBFD;border-radius:4px;padding:.22rem .55rem;margin-bottom:.5rem}

/* Banner de municipio fijo (modo iframe) */
.municipio-fijo{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;
  background:linear-gradient(180deg,#DFEBFD,#EBF3FE);border:1px solid var(--borde);border-left:0px solid var(--primario);
  border-radius:8px;padding:.85rem 1.1rem;margin-bottom:1.4rem}
.municipio-fijo strong{color:var(--subtitulos);font-size:1.02rem}
.municipio-fijo-etiqueta{font:700 .66rem "Inter",monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--primario)}

.campo{margin-bottom:1.05rem}
.campo-fila{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.campo label,.campo-label{display:block;font-weight:600;font-size:.86rem;margin-bottom:.35rem;color:var(--subtitulos)}
.campo input,.campo select,.campo textarea{width:100%;font:400 .95rem "Inter",sans-serif;color:var(--subtitulos);
  padding:.62rem .75rem;background:#fff;border:1px solid var(--borde);border-radius:8px;transition:border-color .15s,box-shadow .15s}
.campo textarea{resize:vertical;min-height:110px}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--primario);box-shadow:0 0 0 3px rgba(3,69,191,.15)}
.campo-invalido input,.campo-invalido select,.campo-invalido textarea{border-color:var(--peligro)}
.error{color:var(--peligro);font-size:.8rem;min-height:1em;display:block}
.campo-pie{display:flex;justify-content:space-between;align-items:baseline}
.contador{color:var(--texto);font-size:.78rem;font-family:"Inter",monospace}
.input-mono{font-family:"Inter",monospace!important;letter-spacing:.12em;text-transform:uppercase}
.anzuelo{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.enlace-discreto{font-size:.85rem;color:var(--texto)}
.form-consulta{max-width:420px}

/* Opciones tipo píldora */
.prioridades{display:flex;gap:.5rem;flex-wrap:wrap}
.pill input{position:absolute;opacity:0;pointer-events:none}
.pill span{display:inline-block;padding:.38rem .95rem;border-radius:999px;border:1px solid var(--borde);
  font-size:.86rem;font-weight:600;color:var(--texto);cursor:pointer;background:#fff;transition:all .15s}
.pill span:hover{transform:translateY(-1px)}
.pill--media input:checked+span{background:#DFEBFD;border-color:var(--primario);color:var(--primario)}

/* ---- Chips ---- */
.chip{display:inline-flex;align-items:center;gap:.4rem;font-size:.76rem;font-weight:700;padding:.22rem .65rem;border-radius:999px;white-space:nowrap}
.chip i{width:7px;height:7px;border-radius:50%;background:currentColor}
.chip--recibida{background:#E0F4E8;color:#177A46}.chip--recibida i{animation:pulso 2s infinite}
.chip--en_proceso{background:#FDF1DC;color:#A06A05}
.chip--respondida{background:#DFEBFD;color:#0345BF}
.chip--resuelta{background:#DFF2F0;color:#0B6F67}
.chip--cerrada{background:#E9ECEE;color:#5C6F74}
.chip--p-baja{background:#EEF1F2;color:#41525A}
.chip--p-media{background:#DFEBFD;color:#0345BF}
.chip--p-alta{background:#FDEEDA;color:#A06A05}
.chip--p-urgente{background:#FBE3E3;color:#A52A2A}
.chip--nota{background:#FDF1DC;color:#A06A05;border:1px dashed var(--ambar)}
.chip--admin{background:var(--navy-900);color:#fff}
.chip--agente{background:#DFEBFD;color:var(--primario)}

/* ---- Éxito + talón ---- */
.exito{max-width:560px;text-align:center;padding:2rem 1rem}
.exito-icono{width:64px;height:64px;margin:0 auto 1rem;border-radius:50%;
  background:linear-gradient(180deg,var(--primario-claro),var(--primario));color:#fff;
  display:flex;align-items:center;justify-content:center;box-shadow:0 10px 24px -10px rgba(3,69,191,.6)}
.exito-icono svg{width:30px;height:30px}
.exito h1{margin-bottom:.5rem}
.ticket-stub{position:relative;margin:1.6rem auto;padding:1.4rem 1.6rem 1.2rem;max-width:420px;
  background:linear-gradient(180deg,#F4F8FF,#DFEBFD);border:1px solid #BBD4F7;border-radius:8px;
  display:grid;gap:.35rem;justify-items:center;box-shadow:0 8px 20px -12px rgba(3,69,191,.4)}
.ticket-stub::before,.ticket-stub::after{content:"";position:absolute;top:50%;width:22px;height:22px;border-radius:50%;
  background:var(--fondo);border:1px solid #BBD4F7;transform:translateY(-50%)}
.ticket-stub::before{left:-12px}.ticket-stub::after{right:-12px}
.ticket-stub-etiqueta{font:700 .64rem "Inter",monospace;letter-spacing:.28em;text-transform:uppercase;color:var(--primario)}
.ticket-stub-codigo{font:700 clamp(1.5rem,4vw,2rem) "Inter",monospace;letter-spacing:.14em;color:var(--navy-900)}
.codigobarras{width:70%;height:26px;margin-top:.3rem;opacity:.8;
  background:repeating-linear-gradient(90deg,var(--navy-900) 0 2px,transparent 2px 5px,var(--navy-900) 5px 6px,transparent 6px 10px)}
.exito-acciones{display:flex;gap:.8rem;justify-content:center;margin-top:1.6rem;flex-wrap:wrap}

/* ---- Alertas ---- */
.alerta{max-width:1180px;margin:1rem auto 0;padding:.75rem 1.1rem;border-radius:8px;border:1px solid;border-left-width:4px;
  font-weight:500;cursor:pointer;animation:aparecer .35s ease both;transition:opacity .4s,transform .4s}
.alerta-ok{background:#E0F4E8;border-color:#BFE5CD;border-left-color:var(--exito);color:#14603A}
.alerta-error{background:#FBE3E3;border-color:#F2C8C8;border-left-color:var(--peligro);color:#8F2626}
.alerta.fuera{opacity:0;transform:translateY(-8px)}
.peligro-texto{color:var(--peligro)}

/* ---- Hilo de conversación ---- */
.ticket-cabecera{margin-bottom:1.4rem}
.ticket-cabecera h1{font-size:clamp(1.4rem,2.6vw,1.9rem);margin:.5rem 0 .3rem}
.ticket-cabecera-fila{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.codigo-mono{font:700 .9rem "Inter",monospace;letter-spacing:.1em;color:var(--navy-900);
  background:#DFEBFD;border:1px solid #BBD4F7;padding:.25rem .6rem;border-radius:6px;text-decoration:none}
.codigo-mono--grande{font-size:1.05rem}
.hilo{display:grid;gap:1rem;margin-bottom:1.6rem}
.msj{background:var(--tarjeta);border:1px solid var(--borde);border-radius:var(--radio);padding:1.1rem 1.3rem;box-shadow:var(--sombra)}
.msj-staff{border-left:4px solid var(--primario);background:#F6FAFF}
.msj-nota{border-left:4px solid var(--ambar);background:#FFFBF2}
.msj-cabecera{display:flex;align-items:center;gap:.75rem;margin-bottom:.7rem}
.msj-cabecera small{display:block;color:var(--texto);font-size:.78rem}
.msj-cabecera .chip{margin-left:auto}
.msj-cuerpo{overflow-wrap:anywhere}
.avatar{width:38px;height:38px;flex:none;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  font:700 .8rem "Inter",sans-serif}
.avatar-cliente{background:#E3EDFD;color:#0A2E7A}
.avatar-staff{background:linear-gradient(180deg,var(--primario-claro),var(--primario));color:#fff}
.caja-respuesta{padding:1.4rem 1.6rem}
.caja-respuesta h3{margin-bottom:.8rem}
.caja-respuesta-controles{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.caja-respuesta-envio{display:flex;gap:.6rem;align-items:center}
.caja-respuesta.modo-nota{border-color:var(--ambar);background:#FFFBF2}
.check{display:flex;align-items:center;gap:.5rem;font-size:.88rem;cursor:pointer;color:var(--texto)}
.check input{accent-color:var(--primario)}
.aviso{background:#FDF1DC;border:1px solid #F0D9A8;border-left:4px solid var(--ambar);padding:.9rem 1.1rem;border-radius:8px;margin-bottom:1rem}

.pie{text-align:center;padding:1.6rem;color:var(--texto);font-size:.82rem;border-top:1px solid var(--borde)}

/* Modo incrustado en iframe */
body.incrustado{background:transparent}
body.incrustado .public-main{margin:.5rem auto 1rem}

/* ============================================================
   PANEL DE ADMINISTRACIÓN
   ============================================================ */
.admin-shell{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
.lateral{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:1.6rem;padding:1.4rem 1rem;color:#C6D3EE;
  background:repeating-linear-gradient(160deg, rgba(255,255,255,.025) 0 1px, transparent 1px 16px),
  linear-gradient(180deg,var(--navy-800),var(--navy-950))}
.lateral-nav{display:grid;gap:.2rem;flex:1;align-content:start}
.lateral-nav a{position:relative;color:#C6D3EE;text-decoration:none;font-weight:600;font-size:.94rem;
  padding:.6rem .9rem;border-radius:8px;transition:background .15s,color .15s,padding-left .15s}
.lateral-nav a:hover{background:rgba(255,255,255,.06);color:#fff;padding-left:1.1rem}
.lateral-nav a.activo{background:rgba(242,169,46,.14);color:#fff}
.lateral-nav a.activo::before{content:"";position:absolute;left:0;top:18%;bottom:18%;width:3px;border-radius:3px;background:var(--ambar)}
.lateral-usuario{display:flex;align-items:center;gap:.6rem;border-top:1px solid rgba(255,255,255,.12);padding-top:1rem}
.lateral-usuario-datos{flex:1;min-width:0}
.lateral-usuario-datos strong{display:block;color:#fff;font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lateral-usuario-datos small{color:#8AA2CE;font-size:.74rem}
.salir{color:#8AA2CE;transition:color .15s,transform .15s}
.salir:hover{color:var(--ambar);transform:translateX(2px)}
.salir svg{width:19px;height:19px}

.contenido{padding:1.8rem clamp(1rem,3vw,2.4rem) 3rem;max-width:1600px;width:100%}
.contenido-cabecera{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:1.4rem;flex-wrap:wrap}
.contenido-cabecera h1{font-size:clamp(1.5rem,2.6vw,2rem)}
.fecha-hoy{color:var(--texto);font-size:.86rem}

.tarjetas-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem;margin-bottom:1.6rem}
.tarjeta-stat{position:relative;overflow:hidden;padding:1.1rem 1.2rem .95rem;border-radius:var(--radio);
  background:var(--tarjeta);border:1px solid var(--borde);box-shadow:var(--sombra);transition:transform .18s,box-shadow .18s}
.tarjeta-stat::before{content:"";position:absolute;inset:0 0 auto 0;height:4px}
.tarjeta-stat:hover{transform:translateY(-3px);box-shadow:0 14px 26px -14px rgba(3,69,191,.3)}
.stat-num{display:block;font:800 2.1rem "Inter",sans-serif;line-height:1}
.stat-label{font-size:.8rem;font-weight:600;color:var(--texto);text-transform:uppercase;letter-spacing:.06em}
.stat-recibida::before{background:var(--exito)}  .stat-recibida .stat-num{color:#177A46}
.stat-proceso::before{background:var(--ambar)}   .stat-proceso .stat-num{color:#A06A05}
.stat-respondida::before{background:var(--primario)} .stat-respondida .stat-num{color:var(--primario)}
.stat-resuelta::before{background:#0B6F67}       .stat-resuelta .stat-num{color:#0B6F67}
.stat-hoy::before{background:var(--navy-900)}    .stat-hoy .stat-num{color:var(--navy-900)}

.dos-columnas{display:grid;grid-template-columns:2fr 1fr;gap:1.4rem;align-items:start}

.tarjeta-tabla{overflow-x:auto}
.tabla{width:100%;border-collapse:collapse;font-size:.92rem}
.tabla th{text-align:left;font:700 .7rem "Inter",sans-serif;text-transform:uppercase;letter-spacing:.1em;
  color:var(--texto);padding:.7rem .9rem;border-bottom:2px solid var(--borde);background:#F6FAFF}
.tabla td{padding:.72rem .9rem;border-bottom:1px solid #E4EDFB;vertical-align:top}
.tabla tbody tr{transition:background .12s}
.tabla-tickets tbody tr{cursor:pointer}
.tabla tbody tr:hover{background:#F3F8FF}
.tabla .bloque{display:block;color:var(--texto);font-size:.78rem}
.celda-suave{color:var(--texto);font-size:.85rem;white-space:nowrap}
.celda-acciones{white-space:nowrap;text-align:right}
.sin-agente{color:var(--texto);font-style:italic;font-size:.85rem}
.vacio{text-align:center;color:var(--texto);padding:2rem!important}
.fila-inactiva{opacity:.55}
.inline{display:inline}

.filtros{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:1.2rem;align-items:center}
.filtros-buscar{flex:1;min-width:220px}
.filtros input,.filtros select{font:400 .9rem "Inter",sans-serif;padding:.55rem .7rem;
  border:1px solid var(--borde);border-radius:8px;background:#fff;transition:border-color .15s,box-shadow .15s}
.filtros input:focus,.filtros select:focus{outline:none;border-color:var(--primario);box-shadow:0 0 0 3px rgba(3,69,191,.15)}

.ticket-detalle{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:1.4rem;align-items:start}
.ticket-lateral{display:grid;gap:1rem}
.mini-form{padding:1.2rem 1.3rem;background:var(--tarjeta);border:1px solid var(--borde);border-radius:var(--radio);box-shadow:var(--sombra)}
.mini-form h3{margin-bottom:.9rem;font-size:1.05rem}
.mini-form .campo{margin-bottom:.8rem}
.dato{display:flex;justify-content:space-between;gap:.8rem;font-size:.86rem;padding:.32rem 0;border-bottom:1px dashed #E4EDFB}
.dato span{color:var(--texto)}
.dato:last-child{border-bottom:0}
.tarjeta-login{width:100%;max-width:440px;padding:2rem 2.2rem}
.tarjeta-carga{padding:1.2rem 1.3rem}
.lista-carga{list-style:none;display:grid;gap:.7rem}
.lista-carga li{display:flex;align-items:center;gap:.7rem}
.lista-carga-nombre{flex:1;font-weight:500;font-size:.9rem;color:var(--subtitulos)}
.lista-carga-n{font:700 .85rem "Inter",monospace;background:#DFEBFD;color:var(--primario);
  border-radius:999px;min-width:2rem;text-align:center;padding:.15rem .5rem}

@media (max-width:980px){
  .public-grid,.dos-columnas,.ticket-detalle{grid-template-columns:1fr}
  .admin-shell{grid-template-columns:1fr}
  .lateral{position:static;height:auto;flex-direction:row;align-items:center;flex-wrap:wrap;gap:1rem}
  .lateral-nav{display:flex;flex-wrap:wrap;flex:1}
  .lateral-usuario{border-top:0;padding-top:0}
  .ticket-lateral{order:-1}
}
@media (max-width:640px){
  .campo-fila{grid-template-columns:1fr}
  .caja-respuesta-controles{flex-direction:column;align-items:stretch}
  .topbar{flex-wrap:wrap;gap:.6rem}
}

/* ===== Corrección de altura en modo iframe ===== */
body.incrustado{min-height:0;overflow:hidden}

/* ===== Documentos adjuntos ===== */
.campo input[type=file]{border:1px dashed var(--borde);padding:.6rem;background:#F8FBFF;cursor:pointer;width:100%;border-radius:8px}
.campo input[type=file]:hover{border-color:var(--primario)}
.adjuntos{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.9rem;border-top:1px dashed var(--borde);padding-top:.8rem}
.adjunto{display:inline-flex;align-items:center;gap:.45rem;text-decoration:none;background:#F3F7FE;
  border:1px solid var(--borde);border-radius:999px;padding:.35rem .8rem;font-size:.82rem;font-weight:600;
  color:var(--primario);transition:background .15s,transform .15s}
.adjunto:hover{background:#DFEBFD;transform:translateY(-1px)}
.adjunto svg{width:14px;height:14px;flex:none}
.adjunto small{color:var(--texto);font-weight:400}

/* Interruptor DPI obligatorio */
.switch{position:relative;display:inline-block;width:44px;height:24px;vertical-align:middle}
.switch input{opacity:0;width:0;height:0}
.switch-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:#C9D6E8;transition:.25s;border-radius:24px}
.switch-slider:before{position:absolute;content:"";height:18px;width:18px;left:3px;bottom:3px;background:#fff;transition:.25s;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.switch input:checked + .switch-slider{background:var(--primario)}
.switch input:checked + .switch-slider:before{transform:translateX(20px)}


/* Layout con formulario angosto y tabla amplia (Encargados) */
.layout-form-angosto{display:grid;grid-template-columns:420px minmax(0,1fr);gap:1.4rem;align-items:start}
@media (max-width:980px){.layout-form-angosto{grid-template-columns:1fr}}

/* Título de tabla con el mismo espaciado y tamaño que los títulos de formulario */
.titulo-tabla{padding:1.2rem 1.3rem 1rem;margin:0;font-size:1.05rem}