/* ============================================================================
   TRRANU · admin-panel.css  ·  Panel de administración
   ----------------------------------------------------------------------------
   QUE HACE
     1) La columna de menu es una BARRA FIJA a la izquierda, no una gaveta.
        Se pliega con su propia flecha: plegada solo iconos (68px), desplegada
        icono + texto (248px). La preferencia se recuerda.
     2) El contenido ocupa el ANCHO COMPLETO. Antes .admin-wrap lo encajonaba
        en 900px y dejaba media pantalla vacia a los lados.
     3) La barra superior (corona + titulo + boton de menu) ya no existe: el
        titulo vive en la barra lateral, bajo la marca.

   Se carga la ULTIMA, asi que puede corregir lo que venga de app.css y
   admin.css sin tocar esos archivos.
   ============================================================================ */

/* ---------- 1 · BARRA FIJA ---------- */
#adminSidebar.adm-rail{
    position:fixed; top:0; left:0; height:100vh; z-index:100081;
    width:68px; padding:14px 10px 12px;
    background:#FFFFFF; border-right:1px solid #E8EEF6;
    display:flex; flex-direction:column; gap:3px;
    transform:none !important;
    transition:width .18s cubic-bezier(.2,.8,.2,1);
    overflow:hidden; overflow-y:auto; -webkit-overflow-scrolling:touch;
}
#adminSidebar.adm-rail.abierto{ width:248px; }

/* Cabecera: marca, subtitulo y flecha */
.adm-rail-top{
    display:flex; align-items:center; gap:10px;
    padding:2px 2px 14px; margin-bottom:8px;
    border-bottom:1px solid #EEF2F8; min-height:48px;
}
.adm-rail-logo{
    width:36px; height:36px; border-radius:11px; flex-shrink:0;
    background:linear-gradient(150deg,#14B8A6,#0D9488 72%);
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-weight:800; font-size:14px;
    font-family:'Sora','Poppins',sans-serif;
}
.adm-rail-id{ display:flex; flex-direction:column; min-width:0; flex:1;
    opacity:0; width:0; overflow:hidden; transition:opacity .14s; }
#adminSidebar.abierto .adm-rail-id{ opacity:1; width:auto; }
.adm-rail-marca{
    color:#0F172A; font-weight:700; font-size:14.5px; line-height:1.15;
    font-family:'Sora','Poppins',sans-serif; letter-spacing:-.2px; white-space:nowrap;
}
.adm-rail-sub{
    color:#64748B; font-size:11px; font-weight:600; white-space:nowrap;
    font-family:'Poppins',sans-serif; margin-top:2px;
}
.adm-rail-flecha{
    background:#F1F5F9; border:none; border-radius:9px; cursor:pointer;
    width:28px; height:28px; flex-shrink:0; color:#64748B;
    display:flex; align-items:center; justify-content:center;
    transition:background .13s, color .13s, transform .18s;
}
.adm-rail-flecha:hover{ background:#E2E8F0; color:#0F172A; }
.adm-rail-flecha svg{ width:17px; height:17px; stroke:currentColor; fill:none;
    stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round; }
#adminSidebar:not(.abierto) .adm-rail-flecha{ transform:rotate(180deg); }
#adminSidebar:not(.abierto) .adm-rail-top{ justify-content:center; gap:0; }
#adminSidebar:not(.abierto) .adm-rail-logo{ display:none; }

/* Botones */
#adminSidebar .adm-side-btn{
    display:flex; align-items:center; gap:12px;
    width:100%; padding:10px 11px; margin:0;
    border:none; background:transparent; cursor:pointer;
    border-radius:11px; color:#475569;
    font-family:'Poppins',sans-serif; font-size:13px; font-weight:600;
    text-align:left; white-space:nowrap; overflow:hidden;
    transition:background .13s, color .13s;
}
#adminSidebar .adm-side-btn svg{
    width:21px; height:21px; flex-shrink:0;
    stroke:currentColor; fill:none; stroke-width:1.8;
    stroke-linecap:round; stroke-linejoin:round;
}
#adminSidebar .adm-side-btn .adm-txt{ opacity:0; width:0; transition:opacity .14s; }
#adminSidebar.abierto .adm-side-btn .adm-txt{ opacity:1; width:auto; }
#adminSidebar .adm-side-btn:hover{ background:#F1F5F9; color:#0F172A; }
#adminSidebar .adm-side-btn.active{
    background:rgba(13,148,136,.10); color:#0F766E; box-shadow:inset 3px 0 0 #0D9488;
}
#adminSidebar .adm-side-btn.logout{ color:#BE123C; }
#adminSidebar .adm-side-btn.logout:hover{ background:#FEF2F2; }
#adminSidebar:not(.abierto) .adm-side-btn{ justify-content:center; padding:10px 0; }

/* ---------- 2 · CONTENIDO A ANCHO COMPLETO ---------- */
body.adm-rail-on .admin-wrap{
    max-width:none !important;
    margin:0 !important;
    padding:20px 26px 40px 96px !important;
    transition:padding-left .18s cubic-bezier(.2,.8,.2,1);
}
body.adm-rail-on.adm-rail-abierta .admin-wrap{ padding-left:276px !important; }

body.adm-rail-on #rpReport,
body.adm-rail-on #upPanel,
body.adm-rail-on .adm-content-sec,
body.adm-rail-on .admin-section{ max-width:none !important; width:auto !important; }

/* ---------- 3 · ETIQUETA "EN VIVO" ---------- */
.adm-vivobar{ display:flex; justify-content:flex-end; margin:0 0 12px; min-height:22px; }
.adm-vivo{
    display:inline-flex; align-items:center; gap:6px;
    font-size:11px; font-weight:700; color:#0F766E;
    background:rgba(13,148,136,.09); border-radius:999px; padding:4px 11px;
    font-family:'Poppins',sans-serif;
}
.adm-vivo i{
    width:7px; height:7px; border-radius:50%; background:#10B981;
    animation:admLatido 1.6s ease-in-out infinite;
}
@keyframes admLatido{ 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:.45;transform:scale(.82);} }

#adminSidebarOverlay{ display:none !important; }

/* ---------- 4 · MOVIL ---------- */
@media (max-width:820px){
    body.adm-rail-on .admin-wrap{ padding:16px 14px 34px 82px !important; }
    body.adm-rail-on.adm-rail-abierta .admin-wrap{ padding-left:82px !important; }
    #adminSidebar.adm-rail.abierto{ box-shadow:0 0 0 100vmax rgba(15,23,42,.35); }
}

/* ---------- 5 · ACCESOS A LA BOVEDA ---------- */
/* Antes era una tarjeta oscura con un boton generico dentro de otra tarjeta.
   Ahora dos accesos al mismo nivel, cada uno diciendo lo que hace. */
.bv-accesos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:12px; }
.bv-acceso{
    display:flex; align-items:center; gap:14px; width:100%; text-align:left;
    background:#fff; border:1px solid #E6ECF4; border-radius:15px;
    padding:16px 16px; cursor:pointer; font-family:'Poppins',sans-serif;
    transition:border-color .14s, box-shadow .14s, transform .12s;
}
.bv-acceso:hover{ border-color:#C4B5F0; box-shadow:0 8px 22px rgba(15,23,42,.09); transform:translateY(-2px); }
.bv-acceso:active{ transform:scale(.985); }
.bv-ic{ width:44px; height:44px; border-radius:13px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.bv-ic svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.85; stroke-linecap:round; stroke-linejoin:round; }
.bv-ic--admin{ background:rgba(13,148,136,.11); color:#0F766E; }
.bv-ic--mia{ background:rgba(79,70,229,.10); color:#4F46E5; }
.bv-txt{ display:flex; flex-direction:column; min-width:0; flex:1; }
.bv-t{ font-size:14px; font-weight:700; color:#0F172A; line-height:1.25; }
.bv-s{ font-size:12px; color:#64748B; font-weight:500; margin-top:3px; line-height:1.35; }
.bv-fl{ color:#CBD5E1; flex-shrink:0; display:flex; }
.bv-fl svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round; }
.bv-acceso:hover .bv-fl{ color:#8B5CF6; }

/* ============================================================================
   6 · EDITOR DE DESASTRE  (#secAdminDesastre)
   ----------------------------------------------------------------------------
   Solo estetica. Los identificadores (tDes, fDes, pDes, lDes, dropDes) y las
   funciones (admPv, admPb, admDl, onDropFile) son los mismos de siempre, asi
   que el desastre que ya tengas publicado no se toca.

   OJO: el JavaScript muestra #lDes y #pDes con style.display='block'. Por eso
   aqui se ocultan con display:none SIN !important: si no, el estilo en linea
   que pone el JS no podria ganar y la vista previa nunca aparecería.
   ============================================================================ */
.ds-ed{ max-width:820px; margin:0 auto; padding:20px 18px 44px; font-family:'Poppins',sans-serif; }
.ds-ed-top{ display:flex; align-items:center; gap:13px; margin-bottom:24px; }
.ds-volver{
    width:38px; height:38px; border-radius:11px; flex-shrink:0; cursor:pointer;
    background:#fff; border:1px solid #E6ECF4; color:#475569;
    display:flex; align-items:center; justify-content:center; transition:background .13s,color .13s;
}
.ds-volver:hover{ background:#F1F5F9; color:#0F172A; }
.ds-volver svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round; }
.ds-ed-tit{ display:flex; flex-direction:column; min-width:0; }
.ds-ed-h{ font-size:19px; font-weight:800; color:#0F172A; line-height:1.2; }
.ds-ed-s{ font-size:12.5px; color:#64748B; font-weight:500; margin-top:3px; }

.ds-paso{ display:flex; align-items:center; gap:11px; margin:0 0 10px; }
.ds-num{
    width:26px; height:26px; border-radius:50%; flex-shrink:0;
    background:rgba(220,38,38,.10); color:#DC2626;
    display:flex; align-items:center; justify-content:center; font-size:12.5px; font-weight:800;
}
.ds-paso-txt{ display:flex; flex-direction:column; min-width:0; }
.ds-paso-t{ font-size:13.5px; font-weight:700; color:#0F172A; line-height:1.25; }
.ds-paso-s{ font-size:11.5px; color:#94A3B8; font-weight:500; margin-top:1px; }

.ds-area{
    width:100%; min-height:150px; padding:14px; resize:vertical;
    border:1px solid #E6ECF4; border-radius:13px; background:#fff;
    font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12.5px; color:#0F172A; line-height:1.6;
}
.ds-area:focus{ outline:none; border-color:#C4B5F0; box-shadow:0 0 0 3px rgba(139,92,246,.12); }

.ds-o{ display:flex; align-items:center; gap:12px; margin:20px 0; color:#94A3B8; font-size:11.5px; font-weight:700; }
.ds-o::before,.ds-o::after{ content:''; flex:1; height:1px; background:#E8EEF6; }

.ds-drop{
    border:2px dashed #E6ECF4; border-radius:14px; background:#fff;
    padding:26px 18px; text-align:center; transition:border-color .14s, background .14s;
}
.ds-drop.on{ border-color:#DC2626; background:#FEF2F2; }
.ds-drop svg{ width:30px; height:30px; margin:0 auto 9px; display:block; color:#94A3B8;
    fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.ds-drop-t{ display:block; font-size:13px; font-weight:700; color:#475569; margin-bottom:12px; }
.ds-drop input[type=file]{ font-size:12px; font-family:inherit; max-width:100%; }

/* display:none SIN !important, a proposito (ver nota de arriba) */
.ds-cargando{ display:none; align-items:center; gap:9px; margin-top:14px;
    font-size:13px; font-weight:600; color:#64748B; }
.ds-spin{ width:16px; height:16px; border-radius:50%; flex-shrink:0;
    border:2.5px solid #FCA5A5; border-top-color:#DC2626; animation:dsGira .8s linear infinite; }
@keyframes dsGira{ to{ transform:rotate(360deg); } }
.ds-previa{ display:none; margin-top:16px; padding:14px; border:1px solid #E6ECF4;
    border-radius:13px; background:#F8FAFC; max-height:320px; overflow-y:auto; }

.ds-acciones{ display:flex; gap:9px; margin-top:22px; flex-wrap:wrap; }
.ds-btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    border:none; border-radius:12px; padding:13px 18px; cursor:pointer;
    font-family:inherit; font-size:13.5px; font-weight:700; color:#fff;
    transition:transform .12s, box-shadow .14s;
}
.ds-btn svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.ds-btn:hover{ box-shadow:0 7px 18px rgba(15,23,42,.16); }
.ds-btn:active{ transform:scale(.97); }
.ds-btn--ver{ flex:1; min-width:150px; background:linear-gradient(135deg,#0f766e,#14b8a6); }
.ds-btn--pub{ flex:1; min-width:150px; background:linear-gradient(135deg,#b45309,#f59e0b); }
.ds-btn--del{ width:50px; padding:13px 0; background:#fff; color:#BE123C; border:1px solid #FECACA; }
.ds-btn--del:hover{ background:#FEF2F2; box-shadow:none; }
.ds-nota{ font-size:11.5px; color:#94A3B8; margin:12px 0 0; line-height:1.55; }

/* ============================================================================
   7 · BOVEDA INCRUSTADA EN LA SECCION CARRIER
   ============================================================================ */
.cv-barra{ display:flex; align-items:center; justify-content:space-between; gap:14px;
    flex-wrap:wrap; margin-bottom:12px; }
.cv-tit{ display:flex; align-items:center; gap:12px; min-width:0; }
.cv-ic{ width:42px; height:42px; border-radius:12px; flex-shrink:0; display:flex;
    align-items:center; justify-content:center; background:rgba(13,148,136,.11); color:#0F766E; }
.cv-ic svg{ width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.85;
    stroke-linecap:round; stroke-linejoin:round; }
.cv-t{ display:block; font-size:16px; font-weight:800; color:#0F172A; line-height:1.2;
    font-family:'Poppins',sans-serif; }
.cv-s{ display:block; font-size:12px; color:#64748B; font-weight:500; margin-top:2px;
    font-family:'Poppins',sans-serif; }
.cv-acc{ display:flex; gap:7px; flex-shrink:0; }
.cv-b{ width:36px; height:36px; border-radius:10px; cursor:pointer; background:#fff;
    border:1px solid #E6ECF4; color:#475569; display:flex; align-items:center;
    justify-content:center; transition:background .13s,color .13s; }
.cv-b:hover{ background:#F1F5F9; color:#0F172A; }
.cv-b svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.9;
    stroke-linecap:round; stroke-linejoin:round; }

/* BOTON "QUIEN VE EL BOTON CARRIER". Antes esta opcion era un desplegable perdido al
   fondo de la pagina; ahora es una accion de la cabecera con nombre y apellidos. */
.cv-vis-btn{ display:flex; align-items:center; gap:8px; height:36px; padding:0 15px;
    border:none; border-radius:10px; cursor:pointer;
    background:linear-gradient(135deg,#0D9488,#14B8A6); color:#fff;
    font-family:'Poppins',sans-serif; font-size:12.5px; font-weight:700; letter-spacing:.01em;
    box-shadow:0 4px 12px rgba(13,148,136,.28); transition:filter .13s, box-shadow .13s, transform .13s; }
.cv-vis-btn:hover{ filter:brightness(1.06); box-shadow:0 6px 16px rgba(13,148,136,.34); transform:translateY(-1px); }
.cv-vis-btn:active{ transform:translateY(0); }
.cv-vis-btn svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.9;
    stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
/* Con el panel abierto, el boton queda "hundido" para que se vea que esta activo. */
.cv-vis-btn.abierta{ background:#0F172A; box-shadow:inset 0 2px 6px rgba(0,0,0,.35); }
@media (max-width:640px){ .cv-vis-btn span{ display:none; } .cv-vis-btn{ width:36px; padding:0; justify-content:center; } }

/* PORTADA DE LA BOVEDA: tarjeta protagonista con el boton "Ir a la boveda".
   La boveda es un ecosistema con pantalla propia; desde aqui se abre entera,
   en su pestana, con todas sus funciones. (Se abandono la incrustacion.) */
.cv-hero{ background:#fff; border:1px solid #E6ECF4; border-radius:18px;
    padding:56px 30px 46px; text-align:center;
    box-shadow:0 10px 30px rgba(15,23,42,.05); }
.cv-hero-ico{ width:84px; height:84px; margin:0 auto 20px; border-radius:24px;
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg,#0D9488,#14B8A6);
    box-shadow:0 12px 28px rgba(13,148,136,.32); }
.cv-hero-ico svg{ width:42px; height:42px; fill:none; stroke:#fff; stroke-width:1.9;
    stroke-linecap:round; stroke-linejoin:round; }
.cv-hero-t{ font-family:'Poppins',sans-serif; font-size:23px; font-weight:700;
    color:#0F172A; margin:0 0 10px; letter-spacing:-.01em; }
.cv-hero-p{ font-size:14px; line-height:1.65; color:#64748B; max-width:560px; margin:0 auto 28px; }
.cv-ir{ display:inline-flex; align-items:center; gap:11px; height:52px; padding:0 30px;
    border:none; border-radius:14px; cursor:pointer;
    background:linear-gradient(135deg,#0D9488,#14B8A6); color:#fff;
    font-family:'Poppins',sans-serif; font-size:15.5px; font-weight:700; letter-spacing:.01em;
    box-shadow:0 10px 24px rgba(13,148,136,.34);
    transition:filter .14s, transform .14s, box-shadow .14s; }
.cv-ir:hover{ filter:brightness(1.06); transform:translateY(-2px);
    box-shadow:0 14px 30px rgba(13,148,136,.4); }
.cv-ir:active{ transform:translateY(0); }
.cv-ir:disabled{ opacity:.65; cursor:wait; transform:none; }
.cv-ir svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:2;
    stroke-linecap:round; stroke-linejoin:round; }
.cv-hero-nota{ margin-top:16px; font-size:12px; color:#94A3B8; }
.cv-hero-msg{ margin-top:10px; font-size:12.5px; font-weight:600; color:#BE123C; min-height:16px; }
.cv-cargando{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    gap:10px; font-family:'Poppins',sans-serif; font-size:13.5px; font-weight:600;
    color:#64748B; background:#fff; z-index:2; }
.cv-spin{ width:17px; height:17px; border-radius:50%; flex-shrink:0;
    border:2.5px solid #CCFBF1; border-top-color:#0D9488; animation:cvGira .8s linear infinite; }
@keyframes cvGira{ to{ transform:rotate(360deg); } }

/* PANEL DE VISIBILIDAD (arriba, entre la cabecera y la boveda).
   Cerrado NO existe (display:none): no le roba ni un pixel a la boveda.
   Abierto es una tarjeta normal con su margen inferior. La cabecera-boton
   antigua del desplegable ya no existe: lo abre y lo cierra el boton de la barra. */
.cv-desp{ display:none; background:#fff; border:1px solid #E6ECF4; border-radius:14px; overflow:hidden; }
.cv-desp.abierta{ display:block; margin:0 0 12px; animation:cvVisEntra .16s ease; }
@keyframes cvVisEntra{ from{ opacity:0; transform:translateY(-5px); } to{ opacity:1; transform:none; } }
.cv-desp-cuerpo{ padding:16px 18px 18px; }

/* ============================================================================
   8 · REINICIO DE CUENTAS (dentro de Registro de usuarios)
   ============================================================================ */
.rc-caja{ background:#fff; border:1px solid #E6ECF4; border-radius:15px; padding:20px;
    margin-top:22px; font-family:'Poppins',sans-serif; }
.rc-cab{ display:flex; align-items:flex-start; gap:13px; margin-bottom:18px; }
.rc-ic{ width:42px; height:42px; border-radius:12px; flex-shrink:0; display:flex;
    align-items:center; justify-content:center; background:rgba(245,158,11,.12); color:#B45309; }
.rc-ic svg{ width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.9;
    stroke-linecap:round; stroke-linejoin:round; }
.rc-tit{ display:flex; flex-direction:column; min-width:0; }
.rc-t{ font-size:15.5px; font-weight:800; color:#0F172A; line-height:1.25; }
.rc-s{ font-size:12.5px; color:#64748B; font-weight:500; margin-top:4px; line-height:1.55; }
.rc-lbl{ display:block; font-size:10.5px; font-weight:800; color:#64748B;
    text-transform:uppercase; letter-spacing:.5px; margin-bottom:6px; }
.rc-sel{ width:100%; padding:12px 13px; border:1px solid #E2E8F0; border-radius:11px;
    background:#fff; font-family:inherit; font-size:13.5px; font-weight:600; color:#0F172A;
    cursor:pointer; }
.rc-sel:focus{ outline:none; border-color:#C4B5F0; box-shadow:0 0 0 3px rgba(139,92,246,.12); }
.rc-cuerpo{ margin-top:16px; }
.rc-cuerpo:empty{ margin-top:0; }