:root{--azul-noche:#0f2c5c;--azul-principal:#164684;--azul-medio:#1B5FA7;--turquesa:#4EC7E8;--dorado:#F6C94C;--sobre-dorado:#3d2e00;--tinta:#0f2440;--tinta-2:#5a6b82;--pie:#8a99ad;--blanco:#ffffff;--fondo:#f3f7fb;--suave:#eef3f9;--borde:#dde7f2;--borde-2:#edf2f8;--encabezado-sub:#a9cdec;--encabezado-texto:#cfe3f6;--rut-turquesa:#7fdcf5;--exito:#1f9a4c;--exito-fondo:#e7f7ee;--exito-borde:#bfe6cf;--exito-texto:#14643a;--aviso-fondo:#fff8e1;--aviso-borde:#f3e2a6;--aviso-texto:#5c4a12;--aviso-icono:#c99a14;--error-fondo:#fdecec;--error-borde:#f3c7c7;--error-texto:#8a1f1f;--error-icono:#b42318;--curso-fondo:#f2fbfe;--curso-borde:#bfe9f6;--recibido-fondo:#e3f4fb;--recibido-texto:#0d6f8f;--emitido-fondo:#fff4d1;--emitido-texto:#7a5a00;--codigo-fondo:#f0f6fc;--codigo-borde:#c8dcef;--admin-noche:#061633;--font-sans:Inter,"Segoe UI",system-ui,-apple-system,Roboto,sans-serif;--font-mono:"IBM Plex Mono",Consolas,ui-monospace,monospace;--radius-sm:6px;--radius-md:9px;--radius-lg:12px;--radius-xl:18px;--radius-pill:999px;--sombra-tarjeta:0 4px 14px rgba(15,44,92,.10);--sombra-boton:0 6px 16px rgba(22,70,132,.28);--sombra-segmento:0 1px 4px rgba(15,44,92,.15);--sombra-ventana:0 24px 60px rgba(7,27,53,.45);--anillo-foco:0 0 0 2px rgba(78,199,232,.7);--alto-encabezado:52px;--alto-fila:32px;--alto-control:32px}
*{box-sizing:border-box}
body{margin:0;font-family:var(--font-sans);font-size:14px;line-height:1.5;background:var(--fondo);color:var(--tinta)}
button,input,select,textarea{font-family:inherit}
.mono{font-family:var(--font-mono)}
.num{font-variant-numeric:tabular-nums}
/* encabezado */
.ct-hdr{color:#fff;background:radial-gradient(120% 140% at 50% 0%,rgba(78,199,232,.30) 0,rgba(78,199,232,0) 50%),linear-gradient(90deg,var(--admin-noche),var(--azul-noche) 40%,var(--azul-principal) 75%,var(--azul-medio))}
/* el logo resalta sobre el lado oscuro del encabezado */
.ct-hdr .ct-lock svg,.ct-hdr .ct-lock>img{border-radius:7px;box-shadow:0 0 0 1px rgba(255,255,255,.22),0 6px 14px rgba(0,0,0,.35)}
.ct-top{min-height:var(--alto-encabezado);display:flex;align-items:center;gap:12px;padding:0 14px;flex-wrap:wrap}
.ct-lock{display:inline-flex;align-items:center;gap:10px;color:inherit;text-decoration:none}
.ct-lock svg,.ct-lock>img{width:30px;height:30px;flex:none;display:block;object-fit:contain}
.ct-lock b{display:block;font-weight:750;font-size:16px;line-height:1.05;letter-spacing:-.01em}
.ct-lock i{display:block;font-style:normal;font-weight:700;font-size:11px;letter-spacing:.3em;line-height:1.3;margin-top:2px;color:var(--encabezado-sub)}
.ct-lock.on-light i{color:var(--azul-medio)}
.ct-lock.on-light b{color:var(--azul-noche)}
.ct-sp{flex:1}
.ct-ib{height:34px;min-width:34px;padding:0 10px;border-radius:var(--radius-md);display:inline-flex;align-items:center;justify-content:center;gap:6px;background:rgba(255,255,255,.14);color:#fff;font-size:12.5px;font-weight:600;border:0;cursor:pointer;text-decoration:none}
.ct-ib:hover{background:rgba(255,255,255,.24)}.ct-ib svg{width:16px;height:16px}
.hdr-search{height:34px;width:min(420px,100%);border-radius:var(--radius-md);border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.12);color:#fff;padding:0 12px;font-size:13px}
.hdr-search::placeholder{color:var(--encabezado-texto)}
.me{display:flex;align-items:center;gap:9px;height:38px;padding:0 10px 0 4px;border-radius:var(--radius-lg);background:rgba(255,255,255,.08);border:1px solid rgba(78,199,232,.35);color:#fff}
.me .av{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-weight:800;font-size:11.5px;background:linear-gradient(135deg,var(--turquesa),var(--azul-medio));box-shadow:inset 0 0 0 1.5px rgba(246,201,76,.8)}
.me .tx{display:flex;flex-direction:column;line-height:1.15}
.me .tx b{font-size:12.5px}.me .tx span{font-size:11px;color:var(--rut-turquesa)}
/* botones */
.ct-btn{height:var(--alto-control);padding:0 12px;border-radius:var(--radius-md);border:1px solid var(--borde);background:var(--blanco);font-weight:600;font-size:12.5px;color:var(--tinta);display:inline-flex;align-items:center;gap:6px;cursor:pointer;white-space:nowrap;text-decoration:none}
.ct-btn:hover{background:var(--suave)}
.ct-btn:focus-visible,.ct-in:focus-visible{outline:none;box-shadow:var(--anillo-foco)}
.ct-btn svg{width:15px;height:15px}
.ct-btn-pri{border:0;color:#fff;background:linear-gradient(135deg,var(--azul-principal),var(--azul-medio));box-shadow:var(--sombra-boton)}
.ct-btn-pri:hover{background:linear-gradient(135deg,var(--azul-principal),var(--azul-medio));filter:brightness(1.08)}
.ct-btn-oro{border:0;color:var(--sobre-dorado);background:var(--dorado)}
.ct-btn-sec{border:0;background:var(--suave)}
.ct-btn-sm{height:28px;font-size:12px;padding:0 10px}
.ct-btn-lg{height:40px;font-size:14px;padding:0 18px}
.ct-ghost{border:0;background:transparent}
/* etiquetas */
.ct-pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:2px 9px;border-radius:var(--radius-pill);white-space:nowrap;background:var(--suave);color:var(--azul-principal)}
.ct-pill.rec{background:var(--recibido-fondo);color:var(--recibido-texto)}
.ct-pill.emi{background:var(--emitido-fondo);color:var(--emitido-texto)}
.ct-pill.ok{background:var(--exito-fondo);color:var(--exito-texto)}
.ct-pill.err{background:var(--error-fondo);color:var(--error-texto)}
.ct-pill.oro{background:var(--dorado);color:var(--sobre-dorado)}
/* formularios */
.ct-field{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:600;color:var(--tinta-2)}
.ct-in{height:var(--alto-control);border:1px solid var(--borde);border-radius:var(--radius-md);padding:0 10px;font-size:13px;color:var(--tinta);background:var(--blanco);font-weight:400;width:100%}
.ct-in.lg{height:42px;font-size:14px}
.ct-help{font-weight:400;font-size:11.5px;color:var(--tinta-2)}
.ct-check{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--tinta);font-weight:400}
.ct-check input{width:16px;height:16px;accent-color:var(--azul-principal);margin:0}
/* tarjetas y avisos */
.ct-card{background:var(--blanco);border:1px solid var(--borde);border-radius:var(--radius-lg);box-shadow:var(--sombra-tarjeta)}
.ct-alert{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:10px;border:1px solid;font-size:13px}
.ct-alert .ic{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:12px;font-weight:800;flex:none;margin-top:1px}
.ct-alert.ok{background:var(--exito-fondo);border-color:var(--exito-borde);color:var(--exito-texto)}.ct-alert.ok .ic{background:var(--exito)}
.ct-alert.warn{background:var(--aviso-fondo);border-color:var(--aviso-borde);color:var(--aviso-texto)}.ct-alert.warn .ic{background:var(--aviso-icono)}
.ct-progress{height:6px;border-radius:3px;background:#e6eef7;overflow:hidden}.ct-progress i{display:block;height:100%;background:linear-gradient(90deg,var(--azul-medio),var(--turquesa));border-radius:3px}
.ct-seg{display:inline-flex;background:var(--suave);border-radius:10px;padding:3px}
.ct-seg button{border:0;background:none;padding:5px 12px;border-radius:8px;font-weight:600;font-size:12.5px;color:var(--tinta-2);cursor:pointer}
.ct-seg button.on{background:var(--blanco);color:var(--tinta);box-shadow:var(--sombra-segmento)}
/* tabla */
.ct-tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:13px;font-variant-numeric:tabular-nums}
.ct-tbl th{background:#f7fafd;color:var(--tinta-2);font-weight:600;font-size:12px;text-align:left;height:34px;padding:0 10px;border-bottom:1px solid var(--borde);white-space:nowrap}
.ct-tbl td{height:40px;padding:0 10px;border-bottom:1px solid var(--borde-2);white-space:nowrap}
.ct-tbl tbody tr:hover td{background:#f5f9fe}
.ct-tbl .c{text-align:center}
/* app de correo */
.cm-shell{display:flex;flex-wrap:wrap;align-items:stretch;min-height:calc(900px - 52px)}
.cm-side{flex:1 1 236px;max-width:236px;background:var(--blanco);border-right:1px solid var(--borde);padding:14px 10px;display:flex;flex-direction:column;gap:4px}
.cm-side h6{margin:14px 10px 4px;font-size:10.5px;letter-spacing:.14em;color:var(--tinta-2);text-transform:uppercase}
.cm-nav{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:9px;color:var(--tinta);font-size:13.5px;text-decoration:none}
.cm-nav:hover{background:var(--suave)}
.cm-nav svg{width:17px;height:17px;color:var(--tinta-2);flex:none}
.cm-nav .n{margin-left:auto;font-size:11.5px;font-weight:700;color:var(--azul-medio)}
.cm-nav.on{background:var(--recibido-fondo);color:var(--azul-principal);font-weight:600;box-shadow:inset 3px 0 0 var(--turquesa)}
.cm-nav.on svg{color:var(--azul-principal)}
.cm-dot{width:8px;height:8px;border-radius:50%;flex:none}
.cm-list{flex:1 1 380px;max-width:420px;min-width:0;background:var(--blanco);border-right:1px solid var(--borde);display:flex;flex-direction:column}
.cm-listhead{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--borde);flex-wrap:wrap}
.cm-row{display:flex;gap:10px;padding:11px 14px;border-bottom:1px solid var(--borde-2);text-decoration:none;color:inherit;width:100%;background:none;border-left:0;border-right:0;border-top:0;text-align:left;cursor:pointer}
.cm-row:hover{background:#f5f9fe}
.cm-row.on{background:#eaf3fc;box-shadow:inset 3px 0 0 var(--azul-principal)}
.cm-row .av{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-weight:700;font-size:12px;flex:none;background:var(--suave);color:var(--azul-principal)}
.cm-row .bd{min-width:0;flex:1;display:flex;flex-direction:column;gap:1px}
.cm-row .l1{display:flex;align-items:center;gap:8px}
.cm-row .fr{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.cm-row .tm{font-size:11.5px;color:var(--tinta-2);white-space:nowrap}
.cm-row .sb{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-row .pv{font-size:12.5px;color:var(--tinta-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-row.unread .fr,.cm-row.unread .sb{font-weight:700}
.cm-read{flex:999 1 520px;min-width:0;background:var(--fondo);padding:18px 22px;display:flex;flex-direction:column;gap:14px}
.cm-msg{background:var(--blanco);border:1px solid var(--borde);border-radius:var(--radius-lg);box-shadow:var(--sombra-tarjeta);padding:20px 22px}
.cm-att{display:inline-flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid var(--borde);border-radius:10px;background:var(--blanco);font-size:12.5px;text-decoration:none;color:var(--tinta)}
.cm-att .ic{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:var(--recibido-fondo);color:var(--recibido-texto)}
.cm-track{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;font-size:12px;color:var(--tinta-2)}
.cm-track b{font-weight:600;color:var(--exito-texto)}
.cm-quota{margin-top:auto;padding:12px 10px 4px;border-top:1px solid var(--borde);display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--tinta-2)}
.cm-page{flex:999 1 600px;min-width:0;padding:22px 26px;display:flex;flex-direction:column;gap:18px}
.cm-h1{margin:0;font-size:24px;line-height:30px;font-weight:800;letter-spacing:-.02em;color:var(--azul-noche)}
.cm-h2{margin:0;font-size:18px;line-height:24px;font-weight:700;letter-spacing:-.01em;color:var(--azul-noche)}
.cm-h3{margin:0;font-size:15px;line-height:20px;font-weight:700;color:var(--azul-noche)}
.cm-over{font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--tinta-2);text-transform:uppercase}
.cm-muted{color:var(--tinta-2);font-size:13px}
.cm-box{overflow-x:auto}

/* ===== App (además de lo de las maquetas) ===== */
html,body{height:100%}
[hidden]{display:none!important}
.vh{position:absolute!important;left:-9999px}
.app{min-height:100vh;display:flex;flex-direction:column}
.cm-shell{flex:1;min-height:0}
.cm-list{overflow:auto;max-height:calc(100vh - 52px)}
.cm-read{overflow:auto;max-height:calc(100vh - 52px)}
.cm-side{overflow:auto;max-height:calc(100vh - 52px)}
.sel-wrap{position:relative;margin:0 2px 4px}
.sel-btn{width:100%;text-align:left;color:var(--tinta);cursor:pointer;padding:10px 12px;border-radius:12px;border:1px solid var(--borde);background:#f7fafd;display:flex;flex-direction:column;gap:3px}
.sel-menu{position:absolute;left:0;right:0;top:100%;margin-top:6px;z-index:20;background:#fff;border:1px solid var(--borde);border-radius:12px;box-shadow:0 12px 30px rgba(15,44,92,.18);padding:8px;display:flex;flex-direction:column;gap:2px}
.sel-menu .lbl{padding:6px 10px 4px;font-size:10.5px;letter-spacing:.14em;font-weight:700;color:var(--tinta-2)}
.cm-nav{border:0;background:transparent;width:100%;cursor:pointer;text-align:left;font-family:inherit}
.cm-row input[type=checkbox]{margin:10px 0 0;accent-color:var(--azul-principal)}
.empty{padding:40px 20px;text-align:center;color:var(--tinta-2);font-size:13.5px}
.mframe{width:100%;border:0;min-height:120px;background:#fff;border-radius:8px}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:100;background:var(--azul-noche);color:#fff;padding:10px 18px;border-radius:10px;font-size:13.5px;box-shadow:0 8px 24px rgba(15,44,92,.3)}
.toast.err{background:#8a1f1f}
.modal-bg{position:fixed;inset:0;background:rgba(7,27,53,.55);z-index:50;display:grid;place-items:center;padding:16px}
.modal{background:#fff;border-radius:18px;box-shadow:var(--sombra-ventana);width:min(600px,100%);max-height:calc(100vh - 32px);display:flex;flex-direction:column;overflow:hidden}
.modal.lg{width:min(900px,100%)}
.modal-h{display:flex;align-items:center;gap:10px;padding:16px 22px;border-bottom:1px solid var(--borde)}
.modal-b{padding:16px 22px;overflow:auto;display:flex;flex-direction:column;gap:12px}
.modal-f{display:flex;gap:8px;justify-content:flex-end;align-items:center;padding:12px 22px;border-top:1px solid var(--borde);background:#fafcfe;flex-wrap:wrap}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.box{padding:16px 18px;display:flex;flex-direction:column;gap:10px}
.sw-row{display:flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid var(--borde);border-radius:10px;font-size:13px}
.sw-row.cust{background:#fffdf4;border-color:var(--aviso-borde)}
.sw-row input{width:34px;height:18px;accent-color:var(--azul-principal)}
.note{padding:8px 12px;border-radius:10px;background:var(--aviso-fondo);border:1px solid var(--aviso-borde);font-size:13px;color:var(--aviso-texto)}
.memo-card{padding:14px 16px;border:1px solid var(--borde);border-radius:12px;background:#fff;display:flex;flex-direction:column;gap:6px}
.memo-card.pend{border-color:var(--dorado);box-shadow:0 0 0 3px rgba(246,201,76,.25)}
textarea.ct-in{padding:10px;line-height:1.55;resize:vertical;height:auto}
.pw{position:relative;display:block}.pw input{padding-right:42px}
.pw button{position:absolute;right:3px;top:50%;transform:translateY(-50%);width:32px;height:32px;border:0;background:transparent;color:var(--tinta-2);cursor:pointer;display:grid;place-items:center;border-radius:8px}
.att-chip{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid var(--borde);border-radius:10px;background:#fff;font-size:12.5px;text-decoration:none;color:var(--tinta)}
.banner{display:flex;align-items:center;gap:10px;padding:8px 14px;background:linear-gradient(90deg,#fffaf0,#fff);border-bottom:1px solid var(--aviso-borde);font-size:13px;color:var(--aviso-texto)}
.back{display:none}
@media (max-width:900px){
 .cm-side{max-width:none;flex-basis:100%;max-height:none;border-right:0;border-bottom:1px solid var(--borde)}
 .cm-list{max-width:none!important;flex-basis:100%!important;max-height:none}
 .cm-read{max-height:none}
 .has-sel .cm-list,.has-sel .cm-side{display:none}
 .no-sel .cm-read{display:none}
 .back{display:inline-flex}
 .grid4{grid-template-columns:repeat(2,minmax(0,1fr))}
 .grid2{grid-template-columns:1fr}
 .hdr-search{display:none}
}

@media (max-width:900px){.hide-m{display:none}}

/* ===== v0.2 · Seguridad de ingreso ===== */
.login-bg{min-height:100vh;display:flex;flex-direction:column;background:radial-gradient(90% 70% at 50% 0%,rgba(78,199,232,.22) 0,rgba(78,199,232,0) 55%),linear-gradient(160deg,var(--azul-noche),var(--azul-principal) 55%,var(--azul-medio))}
.login-card{padding:32px 30px 26px;display:flex;flex-direction:column;gap:18px;border-radius:18px;box-shadow:0 24px 60px rgba(7,27,53,.45)}
.code-in{height:52px;font:600 24px/1 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.32em;text-align:center;padding-inline:12px 4px}
.code-in::placeholder{color:#c3d0de;letter-spacing:.32em}
.setup-steps{margin:0;padding:0;list-style:none;counter-reset:st;display:flex;flex-direction:column;gap:14px}
.setup-steps>li{counter-increment:st;position:relative;padding-left:38px;display:flex;flex-direction:column;gap:6px;font-size:13.5px}
.setup-steps>li::before{content:counter(st);position:absolute;left:0;top:-2px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:13px;color:#fff;background:linear-gradient(135deg,var(--azul-medio),var(--azul-noche));box-shadow:inset 0 0 0 2px rgba(246,201,76,.85)}
.setup-steps>li>span{color:#5a6b82;font-size:12.5px}
.qr-wrap{display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding:12px;border:1px solid var(--borde);border-radius:14px;background:#f7fafd}
.qr{width:168px;height:168px;flex:none;padding:6px;background:#fff;border-radius:12px;box-shadow:0 1px 0 #dde7f2,0 6px 18px rgba(15,44,92,.08)}
.qr svg{width:100%;height:100%;display:block}
.qr-wrap>div:last-child{flex:1 1 200px}
.secret{font-size:13.5px;font-weight:500;color:var(--azul-noche);background:#fff;border:1px dashed #b9cde3;border-radius:8px;padding:7px 10px;word-break:break-all}
.codes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:14px;border:1px dashed #b9cde3;border-radius:14px;background:#f7fafd}
.codes span{font-size:16px;font-weight:500;letter-spacing:.06em;text-align:center;padding:8px;border-radius:9px;background:#fff;color:var(--azul-noche);box-shadow:0 1px 0 #dde7f2}
.alt-ways{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;align-items:center;padding-top:12px;border-top:1px solid #edf2f8}
.alt-ways>span{width:100%;text-align:center;font-size:12px;color:#5a6b82}
.big-ic{align-self:center;width:58px;height:58px;border-radius:18px;display:grid;place-items:center;color:var(--azul-principal);background:#eef3f9}
.big-ic.oro{color:#7a5a00;background:#fff4d1}.big-ic.ok{color:#14643a;background:#e7f7ee}.big-ic.err{color:#8a1f1f;background:#fde8e8}
.ck-list{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px;font-size:13.5px;line-height:1.5}
.ck-row{display:flex;gap:12px;align-items:center;padding:10px 0;border-top:1px solid #edf2f8;flex-wrap:wrap}
.ck-row small{display:block;font-size:12.5px;color:#5a6b82;margin-top:1px}
.ck{width:24px;height:24px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:800;border:2px dashed #c3d0de;color:transparent}
.ck-row.on .ck{border:0;color:#fff;background:linear-gradient(135deg,#2a9d62,#14643a)}
.rec{display:inline-block;vertical-align:1px;margin-left:4px;padding:1px 7px;border-radius:999px;font-size:10.5px;font-weight:700;letter-spacing:.02em;color:#0d6f8f;background:#e3f4fb}
.kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 14px;padding:12px 14px;border:1px solid var(--borde);border-radius:12px;background:#f7fafd;font-size:13px}
.kv>span{color:#5a6b82}
.banner.sec{background:linear-gradient(90deg,#f2fbfe,#fff);border-bottom-color:#bfe9f6;color:var(--azul-noche)}
@media (max-width:520px){.login-card{padding:24px 18px 20px}.codes{grid-template-columns:1fr 1fr}.qr{width:140px;height:140px}}
.banner.danger{background:linear-gradient(90deg,#fdecec,#fff);border-bottom-color:#f3c7c7;color:#8a1f1f}
.ct-alert.err{background:var(--error-fondo);border-color:var(--error-borde);color:var(--error-texto)}.ct-alert.err .ic{background:var(--error-icono)}

/* ===== Marca ===== */
.brand-prev{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:14px;color:#fff;background:linear-gradient(90deg,var(--admin-noche),var(--azul-noche) 40%,var(--azul-principal) 75%,var(--azul-medio));box-shadow:inset 0 -1px 0 rgba(255,255,255,.08)}
.color-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.color-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--borde);border-radius:12px;background:#fff;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.color-row:hover{border-color:#b9cde3;box-shadow:0 4px 14px rgba(15,44,92,.06)}
.color-row input[type=color]{inline-size:42px;block-size:42px;padding:0;border:0;border-radius:10px;background:none;cursor:pointer;flex:none}
.color-row input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.color-row input[type=color]::-webkit-color-swatch{border:1px solid rgba(15,36,64,.15);border-radius:10px}
.color-row b{display:block;font-size:13px;font-weight:600}.color-row small{font-size:11.5px;color:var(--tinta-2)}
.logo-slot{display:flex;gap:14px;align-items:center;padding:12px;border:1px solid var(--borde);border-radius:14px;flex-wrap:wrap}
.logo-prev{width:76px;height:76px;flex:none;display:grid;place-items:center;border-radius:16px;background:repeating-conic-gradient(#f3f7fb 0 25%,#fff 0 50%) 0 0/16px 16px;border:1px solid var(--borde)}
.logo-prev.dark{background:linear-gradient(135deg,var(--azul-medio),var(--azul-noche))}
.logo-prev img{max-width:56px;max-height:56px;object-fit:contain}
.ct-lock span>img.brand-logo{width:100%;height:100%;object-fit:contain;display:block}
.brand-prev .ct-lock svg,.brand-prev .ct-lock img{border-radius:7px;box-shadow:0 0 0 1px rgba(255,255,255,.22),0 6px 14px rgba(0,0,0,.35)}