/* CEVEN Clientes · identidad visual CEVEN (índigo profundo + acento cian) */
:root{
  --tinta:#1E0E3C; --indigo:#241443; --indigo-2:#2E1A54; --indigo-3:#45307A;
  --cian:#12B8D4; --cian-osc:#0E93B5;
  --fondo:#F5F4F9; --blanco:#fff; --borde:#E6E3F0; --borde-2:#DDD9EA;
  --gris:#6E6786; --gris-2:#9A93AE; --campo:#FBFAFD;
  --rojo:#C22B3F; --rojo-bg:#FCE9EC; --rojo-bd:#F0C9CF;
  --verde:#1F8F63; --verde-bg:#E4F4EC; --verde-bd:#C7E7D6;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--fondo);font-family:"IBM Plex Sans",system-ui,sans-serif;color:var(--tinta);-webkit-font-smoothing:antialiased;display:flex;min-height:100vh;align-items:stretch}
h1,h2,strong.num{font-family:Outfit,sans-serif;letter-spacing:-.02em}
a{color:var(--cian-osc);text-decoration:none}
a:hover{color:var(--indigo)}
input,select,button{font-family:inherit}
input:focus,select:focus{outline:2px solid rgba(18,184,212,.45);outline-offset:1px}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- rail ---------- */
.rail{width:248px;flex:none;background:var(--indigo);display:flex;flex-direction:column;padding:22px 16px;gap:26px}
.rail-brand{display:flex;flex-direction:column;gap:14px}
.rail-logo{background:#fff;border-radius:12px;padding:14px 16px;display:flex;align-items:center;justify-content:center}
.rail-logo img{width:100%;height:auto;display:block}
.rail-sub{display:flex;flex-direction:column;gap:2px;padding-left:2px}
.rail-sub strong{font-family:Outfit,sans-serif;font-size:15px;font-weight:600;color:#fff}
.rail-sub span{font-size:11px;color:rgba(255,255,255,.5);letter-spacing:.06em;text-transform:uppercase}
.rail-nav{display:flex;flex-direction:column;gap:4px}
.rail-nav button{cursor:pointer;display:flex;align-items:center;gap:10px;text-align:left;width:100%;border:none;border-radius:9px;padding:11px 13px;font-size:13.5px;font-weight:500;background:transparent;color:rgba(255,255,255,.62)}
.rail-nav button:hover{background:rgba(255,255,255,.06);color:#fff}
.rail-nav button.on{background:rgba(255,255,255,.1);color:#fff}
.rail-nav i{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.7;flex:none}
.rail-foot{margin-top:auto;display:flex;flex-direction:column;gap:12px}
.rail-sep{height:1px;background:rgba(255,255,255,.12)}
.rail-user{display:flex;align-items:center;gap:10px}
.avatar{width:34px;height:34px;border-radius:9px;background:var(--cian);color:#0B2A33;font-family:Outfit,sans-serif;font-weight:600;font-size:13px;display:flex;align-items:center;justify-content:center;flex:none}
.rail-user-txt{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.rail-user-txt strong{font-size:12.5px;color:#fff;font-weight:500}
.rail-user-txt span{font-size:11px;color:rgba(255,255,255,.45)}

/* ---------- main ---------- */
main{flex:1;min-width:0;padding:34px 40px 56px}
.topbar-mobile{display:none;align-items:center;gap:10px;margin-bottom:22px}
.topbar-mobile .rail-logo{padding:8px 10px;border:1px solid var(--borde)}
.topbar-mobile .rail-logo img{height:18px;width:auto}
.topbar-mobile strong{font-family:Outfit,sans-serif;font-size:14px}
.vista{display:none;flex-direction:column;gap:22px}
.vista.on{display:flex;animation:rise .3s ease both}

.hero{display:flex;flex-direction:column;gap:8px;max-width:640px}
.eyebrow{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--cian-osc);font-weight:600}
.hero h1{margin:0;font-size:clamp(28px,3.4vw,40px);font-weight:600;line-height:1.1}
.hero p{margin:0;font-size:15px;line-height:1.55;color:var(--gris);text-wrap:pretty}

.accesos{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;max-width:1000px}
.acceso{text-align:left;cursor:pointer;border-radius:18px;padding:30px 30px 26px;display:flex;flex-direction:column;gap:22px;min-height:230px;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.acceso-primario{background:var(--indigo);border:none;color:#fff;box-shadow:0 14px 34px -18px rgba(36,20,67,.7)}
.acceso-primario:hover{transform:translateY(-3px);box-shadow:0 22px 44px -18px rgba(36,20,67,.75)}
.acceso-secundario{background:#fff;border:1px solid var(--borde);color:var(--tinta);box-shadow:0 10px 26px -20px rgba(36,20,67,.5)}
.acceso-secundario:hover{transform:translateY(-3px);border-color:var(--cian)}
.acceso-icono{width:46px;height:46px;border-radius:12px;background:rgba(18,184,212,.18);border:1px solid rgba(18,184,212,.4);display:flex;align-items:center;justify-content:center;position:relative}
.grid-icono{display:grid;grid-template-columns:1fr 1fr;gap:3px;width:20px}
.grid-icono i{height:4px;border-radius:1px;background:rgba(255,255,255,.55)}
.grid-icono i:nth-child(1),.grid-icono i:nth-child(4),.grid-icono i:nth-child(5){background:var(--cian)}
.acceso-icono-mas{background:#E2F4F8;border-color:#BEE6EF}
.acceso-icono-mas i:nth-child(1){position:absolute;width:20px;height:3px;background:var(--cian-osc);border-radius:2px}
.acceso-icono-mas i:nth-child(2){position:absolute;width:3px;height:20px;background:var(--cian-osc);border-radius:2px}
.acceso-txt{display:flex;flex-direction:column;gap:8px;margin-top:auto}
.acceso-txt strong{font-family:Outfit,sans-serif;font-size:25px;font-weight:600;letter-spacing:-.02em}
.acceso-txt span{font-size:14px;line-height:1.5}
.acceso-primario .acceso-txt span{color:rgba(255,255,255,.62)}
.acceso-secundario .acceso-txt span{color:var(--gris)}

.stats{display:flex;flex-wrap:wrap;gap:14px;max-width:1000px}
.stat{flex:1;min-width:150px;background:#fff;border:1px solid var(--borde);border-radius:13px;padding:16px 18px;display:flex;flex-direction:column;gap:4px}
.stat strong{font-family:Outfit,sans-serif;font-size:26px;font-weight:600}
.stat span{font-size:12px;color:var(--gris)}

.cabecera{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px}
.cabecera h1{margin:0 0 5px;font-size:27px;font-weight:600}
.sub{font-size:13px;color:var(--gris)}
.btn-primario{cursor:pointer;border:none;background:var(--indigo);color:#fff;font-size:13.5px;font-weight:500;padding:11px 18px;border-radius:9px;display:inline-flex;align-items:center;gap:8px}
.btn-primario:hover{background:var(--indigo-2)}
.btn-primario.grande{font-size:14px;padding:13px 26px;border-radius:10px}
.btn-peligro{cursor:pointer;border:1px solid var(--rojo-bd);background:#fff;color:var(--rojo);font-size:13.5px;font-weight:500;padding:11px 18px;border-radius:9px}
.btn-peligro:hover{background:var(--rojo-bg)}
.btn-neutro{cursor:pointer;border:1px solid var(--borde-2);background:#fff;color:#3B2A5C;font-size:14px;font-weight:500;padding:13px 22px;border-radius:10px}
.btn-neutro:hover{background:#FAF9FC}
.link{cursor:pointer;background:none;border:none;font-size:12.5px;color:var(--cian-osc);text-decoration:underline;padding:4px}
.volver{align-self:flex-start;cursor:pointer;background:none;border:none;padding:0;font-size:13px;color:var(--gris)}
.volver:hover{color:var(--indigo)}

/* ---------- buscador ---------- */
.buscador{background:#fff;border:1px solid var(--borde);border-radius:14px;padding:16px 18px;display:flex;flex-direction:column;gap:14px;position:sticky;top:0;z-index:20;box-shadow:0 8px 20px -18px rgba(36,20,67,.5)}
.campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.campos label{display:flex;flex-direction:column;gap:6px;min-width:0}
.campos label>span,.etiqueta{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--gris);font-weight:600}
.campos input,.campos select{border:1px solid var(--borde-2);border-radius:9px;padding:10px 12px;font-size:14px;color:var(--tinta);background:var(--campo);width:100%}
.ancho2{grid-column:span 2;display:flex;flex-direction:column;gap:8px;min-width:0}
.pista{font-size:11.5px;color:var(--gris-2)}
.req{color:var(--rojo)}
.chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.chips-tit{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--gris);font-weight:600}
.chips-lista{display:flex;flex-wrap:wrap;gap:7px}
.chip{cursor:pointer;font-size:12.5px;font-weight:500;padding:7px 12px;border-radius:20px;background:#fff;color:#3B2A5C;border:1px solid var(--borde-2)}
.chip.on{color:#fff}
.chip-clas{padding:8px 13px;background:var(--campo)}
.chip-clas.on{background:var(--indigo-3);border-color:var(--indigo-3);color:#fff}
.chips .link{margin-left:auto}

/* ---------- tabla ---------- */
.tabla-caja{background:#fff;border:1px solid var(--borde);border-radius:14px;overflow:hidden}
.tabla-scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;min-width:940px}
thead tr{background:#FAF9FC}
th{text-align:left;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--gris);font-weight:600;padding:12px 16px;border-bottom:1px solid var(--borde)}
th.der{text-align:right}
tbody tr{cursor:pointer;border-bottom:1px solid #F0EEF6}
tbody tr:hover{background:#FAF9FC}
td{padding:14px 16px;vertical-align:middle;font-size:13.5px;color:#3B2A5C}
td.nom{display:table-cell}
td .nombre{font-size:14px;font-weight:600;color:var(--tinta);display:block}
td .contacto{font-size:12px;color:var(--gris);display:block;margin-top:3px}
td.num{font-variant-numeric:tabular-nums;white-space:nowrap}
td.der{text-align:right;white-space:nowrap}
.celda-tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{display:inline-block;font-size:11.5px;font-weight:600;padding:4px 9px;border-radius:6px;white-space:nowrap}
.tag-clas{color:var(--indigo-3);background:#F1EEF9;border:1px solid #E2DCF1;letter-spacing:.03em}
.estado{display:inline-block;font-size:11.5px;font-weight:600;padding:4px 9px;border-radius:6px}
.estado-activo{background:var(--verde-bg);color:var(--verde);border:1px solid var(--verde-bd)}
.estado-retirado{background:#F1F0F5;color:var(--gris);border:1px solid #E1DFE9}
.vacio{padding:44px 20px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.vacio strong{font-family:Outfit,sans-serif;font-size:16px}
.vacio span{font-size:13px;color:var(--gris);max-width:340px;line-height:1.5}

/* ---------- ficha ---------- */
.ficha-head{background:#fff;border:1px solid var(--borde);border-radius:16px;padding:26px 28px;display:flex;flex-wrap:wrap;gap:20px;align-items:flex-start;justify-content:space-between}
.ficha-id{display:flex;flex-direction:column;gap:10px;min-width:260px}
.ficha-chips{display:flex;flex-wrap:wrap;align-items:center;gap:9px}
.ficha-head h1{margin:0;font-size:clamp(22px,2.4vw,30px);font-weight:600;line-height:1.15}
.ficha-acciones{display:flex;gap:10px;flex-wrap:wrap}
.dos-col{display:grid;grid-template-columns:1.25fr .75fr;gap:20px;align-items:start}
.tarjeta{background:#fff;border:1px solid var(--borde);border-radius:16px;padding:24px 26px;display:flex;flex-direction:column;gap:18px}
.tarjeta h2{margin:0;font-size:15px;font-weight:600}
.tarjeta-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px}
.datos{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px 26px}
.dato{display:flex;flex-direction:column;gap:4px}
.dato span{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--gris-2);font-weight:600}
.dato strong{font-size:14.5px;font-weight:400;color:var(--tinta);font-family:inherit;letter-spacing:0}
.servicios{display:flex;flex-direction:column;gap:10px}
.servicio{border-radius:11px;padding:13px 15px;display:flex;flex-direction:column;gap:6px}
.servicio-tit{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:600;color:var(--tinta)}
.punto{width:9px;height:9px;border-radius:50%;flex:none}
.servicio-obs{font-size:12.5px;color:var(--gris);line-height:1.45}

/* ---------- formulario ---------- */
.form-head{display:flex;flex-direction:column;gap:6px}
.form-head h1{margin:0;font-size:27px;font-weight:600}
.error{background:var(--rojo-bg);border:1px solid var(--rojo-bd);border-radius:11px;padding:14px 16px;display:flex;flex-direction:column;gap:5px}
.error strong{font-size:13.5px;color:#8E1B2C;font-family:inherit}
.error span{font-size:13px;color:#A33344;line-height:1.5}
.modulos{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px}
.modulo{display:flex;flex-direction:column;gap:10px;padding:14px 15px;border-radius:12px;background:var(--campo);border:1px solid var(--borde)}
.modulo-btn{cursor:pointer;background:none;border:none;padding:0;display:flex;align-items:center;gap:11px;text-align:left;width:100%}
.check{width:21px;height:21px;border-radius:6px;flex:none;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;background:#fff;border:1px solid #CFC9E0}
.modulo-txt{display:flex;flex-direction:column;gap:2px}
.modulo-txt strong{font-size:14px;font-weight:600;font-family:inherit;letter-spacing:0}
.modulo-txt span{font-size:11.5px;color:var(--gris)}
.modulo input{border:1px solid var(--borde-2);border-radius:8px;padding:9px 11px;font-size:12.5px;background:#fff;width:100%}
.form-acciones{display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding-bottom:8px}
#v-form,#v-detalle{max-width:1000px}

/* ---------- modal y toast ---------- */
.modal{position:fixed;inset:0;background:rgba(30,14,60,.45);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;padding:24px;z-index:60}
.modal-caja{background:#fff;border-radius:16px;padding:28px;max-width:460px;width:100%;display:flex;flex-direction:column;gap:14px;box-shadow:0 30px 70px -20px rgba(30,14,60,.6);animation:rise .2s ease both}
.modal-caja h2{margin:0;font-size:19px;font-weight:600}
.modal-caja p{margin:0;font-size:13.5px;line-height:1.55;color:var(--gris)}
.modal-acciones{display:flex;flex-direction:column;gap:9px;margin-top:4px}
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);background:var(--tinta);color:#fff;padding:13px 20px;border-radius:11px;display:flex;align-items:center;gap:11px;box-shadow:0 18px 40px -14px rgba(30,14,60,.7);z-index:70;font-size:13.5px;animation:rise .25s ease both}
.toast .ok{width:20px;height:20px;border-radius:50%;background:var(--cian);color:#0B2A33;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none}
[hidden]{display:none!important}

/* ---------- responsive ---------- */
@media (max-width:900px){
  body{flex-direction:column}
  .rail{position:fixed;inset:auto 0 0 0;width:100%;height:64px;flex-direction:row;align-items:center;padding:0 12px;gap:6px;z-index:40}
  .rail-brand,.rail-foot{display:none}
  .rail-nav{flex-direction:row;flex:1;gap:6px}
  .rail-nav button{justify-content:center;font-size:12.5px;padding:10px 8px}
  main{padding:20px 18px 96px}
  .topbar-mobile{display:flex}
  .dos-col{grid-template-columns:1fr}
  .ancho2{grid-column:span 1}
  .acceso{min-height:0;padding:22px}
  .buscador{position:static}
}