/* Clientes de Clónico · estilo Clónico: tinta, rombo, sin sombras, Comfortaa en títulos, Roboto en el texto. Día y noche. */
:root{--m1:#0993FC;--m2:#7A3CF1;--m3:#FF006E;--degradado:linear-gradient(90deg,var(--m1),var(--m2) 55%,var(--m3));
  --fondo:#f7f7fc;--panel:#fff;--texto:#04012a;--suave:#565a7a;--borde:#e3e3f0;--seleccion:color-mix(in srgb,#87bdfa 22%,transparent);--radio:6px;
  --verde:#14a267;--azul:#1f6fd1;--rojo:#c4122f;--naranja:#b54708;--gris:#5f6680;
  --f-titulo:Comfortaa,"Trebuchet MS",system-ui,sans-serif;--f-texto:Roboto,"Segoe UI",Arial,sans-serif;--f-dato:"Roboto Mono",ui-monospace,Consolas,monospace}
@media (prefers-color-scheme:dark){:root{--fondo:#07052b;--panel:#0e0b3a;--texto:#eeeefa;--suave:#a6a8c8;--borde:#24215a;--seleccion:color-mix(in srgb,#87bdfa 14%,transparent);
  --verde:#3dd598;--azul:#7aa8ff;--rojo:#ff5a76;--naranja:#f2b33d;--gris:#a6a8c8;color-scheme:dark}}
*{box-sizing:border-box}
body{margin:0;background:var(--fondo);color:var(--texto);font:15px/1.5 var(--f-texto);min-height:100vh;display:flex;flex-direction:column}
a{color:var(--m1);text-decoration:none}a:hover{text-decoration:underline}
h1,h2{font-family:var(--f-titulo);text-wrap:balance;margin:0}h1{font-size:23px}h2{font-size:15.5px;margin:0 0 10px;display:flex;align-items:center;gap:8px}
.rombo{display:inline-block;width:9px;height:9px;border-radius:28%;transform:rotate(45deg);flex:none;background:var(--c,var(--degradado))}
.rombo.hueco{background:transparent;box-shadow:inset 0 0 0 2px var(--c)}
.cabecera{display:flex;align-items:center;gap:22px;padding:12px 24px;position:relative;flex-wrap:wrap}
.cabecera::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--degradado)}
.marca{display:flex;align-items:center;gap:10px;color:var(--texto);font:700 15px var(--f-titulo)}.marca:hover{text-decoration:none}.marca img{height:28px}
.oscuro{display:none}@media (prefers-color-scheme:dark){.claro{display:none}.oscuro{display:inline}}
.cabecera nav{display:flex;gap:4px;flex-wrap:wrap}
.cabecera nav a{padding:7px 12px;color:var(--suave);border-radius:var(--radio);position:relative}
.cabecera nav a.activo{color:var(--texto);font-weight:500}
.cabecera nav a.activo::before{content:"";position:absolute;left:1px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:28%;transform:rotate(45deg);background:var(--degradado)}
.sesion{margin-left:auto;display:flex;align-items:center;gap:12px;font-size:13.5px}.sesion a{color:var(--suave)}
main{width:100%;max-width:1200px;margin:0 auto;padding:22px 24px;flex:1}
footer{padding:14px 24px;border-top:1px solid var(--borde);color:var(--suave);font-size:12.5px;text-align:center}
.panel{background:var(--panel);border:1px solid var(--borde);border-radius:var(--radio);padding:18px;margin-bottom:16px;min-width:0}
.panel.estrecho{max-width:520px;margin:40px auto}.panel.alerta{border-color:color-mix(in srgb,var(--naranja) 50%,var(--borde))}
.cab{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.suave{color:var(--suave);font-size:13px}.error{color:var(--rojo);font-weight:500}.naranja{color:var(--naranja)}
label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--suave);font-weight:500}
input,select,textarea,button,.boton{font:inherit;padding:8px 10px;border:1px solid var(--borde);border-radius:var(--radio);background:var(--panel);color:var(--texto);min-width:0}
input[type=checkbox]{accent-color:var(--m2);width:16px;height:16px;padding:0}
input:focus,select:focus,textarea:focus,.lienzo:focus{outline:2px solid color-mix(in srgb,var(--m2) 45%,transparent);border-color:var(--m2)}
button,.boton{background:var(--texto);color:var(--fondo);border-color:var(--texto);cursor:pointer;font-weight:500;padding:8px 16px;display:inline-block;text-align:center}
button:hover,.boton:hover{box-shadow:inset 0 -3px 0 var(--m3);text-decoration:none}
button:focus-visible,a:focus-visible{outline:2px solid var(--m1);outline-offset:2px}
button.sec,.boton.sec{background:transparent;color:var(--texto);border-color:var(--borde)}button.sec:hover,.boton.sec:hover{box-shadow:none;border-color:var(--m2)}
button.peligro{background:transparent;color:var(--rojo);border-color:var(--rojo)}button.peligro:hover{box-shadow:none;background:color-mix(in srgb,var(--rojo) 8%,transparent)}
button:disabled{opacity:.6;cursor:default}
.icono-boton{width:28px;height:28px;display:inline-grid;place-items:center;padding:0;background:none;border:1px solid transparent;border-radius:var(--radio);color:var(--suave);cursor:pointer}
.icono-boton:hover{border-color:var(--m2);color:var(--texto);box-shadow:none}
.pila{display:grid;gap:12px;max-width:420px}.dos{display:grid;grid-template-columns:2fr 1fr;gap:12px}
.rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-bottom:12px}
.botones{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.en-linea{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.chk{flex-direction:row;align-items:center;gap:7px;font-size:14px;color:var(--texto);font-weight:400}
.filtros{display:flex;gap:10px;flex-wrap:wrap;align-items:end;margin-bottom:12px}.filtros label{min-width:150px}.filtros .q{flex:1 1 220px}
.tabla{overflow-x:auto}table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:8px 9px;border-bottom:1px solid var(--borde);vertical-align:top}
th{font-size:12.5px;color:var(--suave);font-weight:500;white-space:nowrap}tbody tr:hover td{background:var(--seleccion)}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}.hora{font:12.5px var(--f-dato);color:var(--suave);white-space:nowrap}.acc{width:1%;white-space:nowrap}
.cifras{display:flex;gap:16px 34px;flex-wrap:wrap;margin:0 0 18px}
.cifras>*{color:var(--texto);display:flex;flex-direction:column}.cifras a:hover{text-decoration:none}.cifras a:hover span{text-decoration:underline}
.cifras b{font:700 26px var(--f-titulo)}.cifras span{font-size:13px;color:var(--suave);display:flex;align-items:center;gap:7px}
.estado{display:inline-flex;align-items:center;gap:7px;font-size:13px;white-space:nowrap}
.estado::before{content:"";width:8px;height:8px;border-radius:28%;transform:rotate(45deg);background:var(--c,var(--gris))}
.estado.enviando{--c:var(--azul)}.estado.terminada{--c:var(--verde)}.estado.pausada{--c:var(--naranja)}.estado.cancelada{--c:var(--rojo)}
.estado-linea{display:inline-flex;gap:8px;align-items:center;font-size:14px}
.aviso{display:flex;gap:10px;align-items:baseline;border:1px solid var(--borde);border-radius:var(--radio);padding:10px 14px;margin-bottom:14px;background:var(--panel)}
.aviso .rombo{--c:var(--verde)}.aviso.error .rombo{--c:var(--rojo)}.aviso.aviso .rombo{--c:var(--naranja)}
.columnas{display:grid;grid-template-columns:minmax(0,2fr) minmax(280px,1fr);gap:16px;align-items:start}.columnas.iguales{grid-template-columns:1fr 1fr}
.fila-grupo{display:flex;align-items:center;gap:8px;padding:4px 0}.fila-grupo form{margin-left:auto}
.grupos{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px;margin-bottom:14px}
.editor{border:1px solid var(--borde);border-radius:var(--radio);margin:12px 0 18px}
.editor .barra{display:flex;gap:4px;flex-wrap:wrap;padding:6px;border-bottom:1px solid var(--borde)}
.editor .barra button{background:transparent;color:var(--texto);border-color:transparent;padding:5px 9px;font-size:13.5px;font-weight:400}
.editor .barra button:hover{box-shadow:none;border-color:var(--m2)}
.lienzo{min-height:320px;padding:16px;background:#fff;color:#222;font:15px Arial,sans-serif;border-radius:0 0 var(--radio) var(--radio);overflow-wrap:anywhere}
.lienzo img{max-width:100%;height:auto}.lienzo a{color:#0b57d0}
iframe.vista{width:100%;height:520px;border:1px solid var(--borde);border-radius:var(--radio);background:#fff}
details.seccion>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;font:700 15.5px var(--f-titulo);margin-bottom:12px}
details.seccion>summary::-webkit-details-marker{display:none}details.seccion:not([open])>summary{margin-bottom:0}
details.seccion .cuenta{margin-left:auto;font:400 13px var(--f-texto);color:var(--suave)}
pre.codigo,code{font-family:var(--f-dato);font-size:13px}pre.codigo{background:var(--fondo);border:1px solid var(--borde);border-radius:var(--radio);padding:10px 12px;overflow-x:auto;white-space:pre-wrap;word-break:break-all}
code.grande{font-size:17px;background:var(--fondo);padding:2px 8px;border-radius:4px;user-select:all}
.clave-2fa{border:1px solid var(--borde);border-radius:var(--radio);padding:10px 12px;margin:8px 0}.clave-2fa code{font-size:16px;user-select:all}
ol.pasos{padding-left:20px}ol.pasos li{margin-bottom:10px}.paginas{font-size:13px;color:var(--suave)}
body.fuera main{display:grid;place-items:center}
.entrada{width:100%;max-width:380px;background:var(--panel);border:1px solid var(--borde);border-radius:var(--radio);padding:28px}
.entrada h1{margin:14px 0 18px;font-size:20px}.entrada form{display:grid;gap:12px}.entrada .suave{margin:14px 0 0}
@media (max-width:860px){.columnas,.columnas.iguales,.dos{grid-template-columns:1fr}main{padding:16px}.cabecera{padding:10px 16px;gap:10px}}