*{
box-sizing:border-box;
}

html,body{
margin:0;
height:100%;
width:100%;
font-family:Arial, sans-serif;
background:#eef1f5;
overflow:hidden;
}

:root{
--brand-gold:#d4af37;
--brand-logo-filter:brightness(0) saturate(100%) invert(80%) sepia(56%) saturate(1040%) hue-rotate(356deg) brightness(95%) contrast(97%);
--ui-button-glow:0 0 0 1px rgba(255,255,255,.18), 0 10px 22px rgba(15,23,42,.18), 0 0 18px rgba(212,175,55,.18);
--ui-button-glow-hover:0 0 0 1px rgba(255,255,255,.24), 0 16px 30px rgba(15,23,42,.22), 0 0 24px rgba(212,175,55,.24);
--ui-button-glow-active:0 0 0 1px rgba(255,255,255,.2), inset 0 2px 6px rgba(15,23,42,.18), 0 8px 18px rgba(15,23,42,.18);
--ui-button-focus-ring:0 0 0 3px rgba(255,255,255,.34), 0 0 0 6px rgba(22,58,95,.28);
--ui-button-disabled-opacity:.58;
--ui-card-border:rgba(15,23,42,.08);
--ui-card-shadow:0 12px 24px rgba(15,23,42,.10);
--ui-card-shadow-hover:0 16px 32px rgba(15,23,42,.14);
}

body.app-shell{
transition:opacity .18s ease;
opacity:1;
}

body.app-shell,
body.app-shell .topbar,
body.app-shell .layout,
body.app-shell .main,
body.app-shell .card{
opacity:1;
filter:none;
backdrop-filter:none;
visibility:visible;
pointer-events:auto;
}

.layout{
display:flex;
height:100dvh;
width:100%;
overflow:hidden;
}

body.panel-page{
overflow:auto;
}


.ui-button{
appearance:none;
border:1px solid rgba(255,255,255,.18);
border-radius:16px;
padding:11px 16px;
min-height:44px;
font:inherit;
font-weight:800;
line-height:1.2;
text-decoration:none;
cursor:pointer;
position:relative;
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
color:#ffffff;
background:linear-gradient(135deg,#214f8f,#163a5f);
box-shadow:var(--ui-button-glow);
transition:transform .2s ease, box-shadow .2s ease, filter .2s ease, border-color .2s ease, opacity .2s ease, background .2s ease, color .2s ease;
}

.ui-button:hover{
transform:translateY(-2px);
filter:brightness(1.04);
box-shadow:var(--ui-button-glow-hover);
}

.ui-button:active{
transform:translateY(0) scale(.985);
box-shadow:var(--ui-button-glow-active);
filter:brightness(.98);
}

.ui-button:focus-visible{
outline:none;
box-shadow:var(--ui-button-focus-ring), var(--ui-button-glow-hover);
}

.ui-button:disabled,
.ui-button[aria-disabled="true"]{
opacity:var(--ui-button-disabled-opacity);
cursor:not-allowed;
filter:saturate(.7);
box-shadow:0 0 0 1px rgba(15,23,42,.10), 0 8px 16px rgba(15,23,42,.08);
}

.ui-button--secondary{
color:#0c1f34;
background:linear-gradient(135deg,#f8fbff,#dbe7f3);
border-color:rgba(22,58,95,.22);
}

.ui-button--ghost{
color:#163a5f;
background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(236,242,248,.9));
border-color:rgba(22,58,95,.18);
}

.ui-button--critical{
background:linear-gradient(135deg,#d93d57,#8f1228);
}

.ui-button[data-coming-soon]{
padding-bottom:24px;
}

.ui-button[data-coming-soon]::after{
content:attr(data-coming-soon);
position:absolute;
left:12px;
bottom:7px;
font-size:10px;
font-weight:800;
letter-spacing:.04em;
text-transform:uppercase;
padding:3px 7px;
border-radius:999px;
background:rgba(255,255,255,.18);
color:currentColor;
opacity:.96;
}

.ui-card{
background:#ffffff;
border:1px solid var(--ui-card-border);
border-radius:20px;
box-shadow:var(--ui-card-shadow);
transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
cursor:default;
}

.ui-card--interactive{
cursor:pointer;
position:relative;
}

.ui-card--interactive::after{
content:'↗';
position:absolute;
top:14px;
right:14px;
font-size:14px;
font-weight:800;
color:rgba(22,58,95,.58);
}

.ui-card--interactive:hover,
.ui-card--interactive:focus-visible{
border-color:rgba(22,58,95,.34);
box-shadow:var(--ui-card-shadow-hover);
transform:translateY(-2px);
}


body.panel-page .mobile-stage{
width:100%;
min-height:100dvh;
}

body.panel-page .layout{
min-height:100dvh;
}

/* SIDEBAR */

.sidebar{
width:300px;
background:linear-gradient(180deg,#0c1f34,#142f4e);
color:var(--brand-gold);
padding:18px 20px 12px;
display:flex;
flex-direction:column;
height:100dvh;
overflow:hidden;
box-shadow:4px 0 18px rgba(0,0,0,.35);
flex-shrink:0;
}

body.panel-page .sidebar{
--panel-menu-offset:44px;
}

.logo{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
margin-top:37px;
margin-bottom:20px;
}

.logo-texto{
background:transparent;
padding:0;
border-radius:0;
}

.logo img{
width:200px;
margin-bottom:6px;
filter:drop-shadow(0 18px 40px rgba(0,0,0,.95));
}

.brand-logo-transparent{
background:transparent;
mix-blend-mode:normal;
filter:var(--brand-logo-filter);
}

body.panel-page .brand-logo-transparent{
filter:
var(--brand-logo-filter)
drop-shadow(0 0 10px color-mix(in srgb, var(--brand-gold) 60%, transparent));
}

.logo-spin{
animation:logoRotate 22s linear infinite;
transform-style:preserve-3d;
}

@keyframes logoRotate{
0%{transform:rotateY(0deg);}
100%{transform:rotateY(360deg);}
}

.logo h1{
font-size:28px;
letter-spacing:3px;
margin:0;
color:var(--brand-gold);
line-height:1.1;
}

.logo p{
font-size:13px;
opacity:.95;
margin:2px 0 0 0;
line-height:1.2;
color:var(--brand-gold);
}

.logo-texto h1,
.logo-texto p,
.logo-texto .autor{
background:transparent;
}

.autor{
font-size:12px;
margin-top:4px;
}

.menu{
margin-top:24px;
display:flex;
flex-direction:column;
gap:8px;
width:100%;
padding:0;
margin-left:0;
align-items:stretch;
}

body.panel-page .menu{
margin-top:var(--panel-menu-offset);
}

.menu a{
padding:9px 12px;
border-radius:12px;
cursor:pointer;
display:flex;
align-items:center;
justify-content:flex-start;
gap:10px;
transition:.25s;
color:white;
font-size:15px;
font-weight:600;
box-shadow:0 4px 12px rgba(0,0,0,.45);
text-decoration:none;
line-height:1.2;
width:100%;
min-width:0;
max-width:100%;
margin:0;
transform:translateX(0);
}

.menu a:hover{
transform:translateX(0);
}

.menu .inicio{background:linear-gradient(145deg,#ff2647,#c41e3a);}
.menu .clientes{background:linear-gradient(145deg,#8fe6ef,#5fcfd8);}
.menu .causas{background:linear-gradient(145deg,#2dd4bf,#0f766e);}
.menu .agenda{background:linear-gradient(145deg,#a855f7,#6d28d9);}
.menu .herramientas{background:linear-gradient(145deg,#385f91,#1f3f68);}
.menu .config{background:linear-gradient(145deg,#d6a06a,#9a6133);}

body.tools-page{
background:#d7e0ea;
overflow:auto;
}

.tools-shell{
padding:20px;
display:grid;
gap:18px;
max-width:1400px;
margin:0 auto 24px;
}

.tools-hero{
background:linear-gradient(140deg,#ffffff,#f2f6fb);
border:1px solid #c7d4e3;
border-radius:18px;
padding:18px 20px;
box-shadow:0 10px 22px rgba(17,24,39,.08);
}

.tools-hero h2{
margin:0 0 8px;
color:#17324e;
}

.tools-hero p{
margin:0;
color:#32465c;
}

.tools-grid-top{
display:grid;
grid-template-columns:minmax(280px,360px) minmax(520px,1fr) minmax(280px,340px);
gap:18px;
align-items:stretch;
}

.tool-card{
background:#ffffff;
border:1px solid #c7d4e3;
border-radius:18px;
padding:16px;
box-shadow:0 10px 22px rgba(17,24,39,.07);
}

.tool-card h3{
margin:0 0 12px;
font-size:18px;
color:#16324e;
}

.tool-clock-wrap{
display:flex;
flex-direction:column;
align-items:center;
gap:10px;
}

.tool-clock-canvas{
width:min(320px,100%);
aspect-ratio:1/1;
max-width:300px;
}

.tool-clock-time{
font-size:24px;
font-weight:700;
color:#17324e;
letter-spacing:.04em;
}

.tool-clock-date{
font-size:14px;
color:#4b5f73;
}

.tool-calendar-head{
display:flex;
justify-content:space-between;
align-items:center;
gap:10px;
margin-bottom:12px;
}

.tool-calendar-nav{
border:1px solid #9eb0c4;
background:#f7faff;
color:#17324e;
border-radius:10px;
padding:8px 10px;
font-weight:700;
cursor:pointer;
}

.tool-calendar-grid{
display:grid;
grid-template-columns:repeat(7,minmax(0,1fr));
gap:8px;
}

.tool-calendar-day-name,
.tool-calendar-day{
text-align:center;
padding:10px 6px;
border-radius:10px;
}

.tool-calendar-day-name{
font-size:12px;
font-weight:700;
text-transform:uppercase;
color:#4b5f73;
background:#edf2f8;
}

.tool-calendar-day{
font-weight:700;
color:#17324e;
background:#f8fbff;
border:1px solid #d6e0ec;
}

.tool-calendar-day.is-today{
background:#1f3f68;
color:#fff;
border-color:#1f3f68;
}

.tool-calculator{
display:grid;
gap:10px;
}

.tool-calculator-display{
width:100%;
border:1px solid #c7d4e3;
border-radius:12px;
padding:12px;
font-size:28px;
text-align:right;
background:#f8fbff;
color:#0f2338;
font-weight:700;
}

.tool-calculator-keys{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:8px;
}

.tool-calculator-keys button{
border:1px solid #b7c8db;
border-radius:10px;
padding:12px 6px;
font-size:18px;
font-weight:700;
background:#ffffff;
color:#17324e;
cursor:pointer;
}

.tool-calculator-keys .is-op{
background:#e8f0f9;
}

.tool-calculator-keys .is-primary{
background:#1f3f68;
color:#fff;
border-color:#1f3f68;
}

.tools-grid-devices{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:18px;
}

.tool-device-list{
display:grid;
gap:12px;
}

.tool-device{
border:1px solid #d1dbe6;
border-radius:14px;
padding:12px;
background:#f9fbff;
display:grid;
gap:10px;
}

.tool-device h4{
margin:0;
color:#1a3552;
font-size:15px;
}

.tool-device label{
display:grid;
gap:6px;
font-size:13px;
font-weight:700;
color:#31485e;
}

.tool-device input,
.tool-device select{
border:1px solid #bac9d8;
background:#fff;
border-radius:10px;
padding:9px 10px;
font:inherit;
color:#17324e;
}

@media (max-width:1200px){
  .tools-grid-top{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .tools-grid-top .tool-card:last-child{
    grid-column:1 / -1;
  }
}

@media (max-width:980px){
  .tools-grid-devices{
    grid-template-columns:1fr;
  }
}

@media (max-width:860px){
  .tools-grid-top{
    grid-template-columns:1fr;
  }
}

.user-status{
margin-top:auto;
font-size:12px;
opacity:.8;
padding-top:8px;
}

.icon{
font-size:20px;
min-width:24px;
text-align:center;
margin-left:0;
}

/* MAIN */

.main{
flex:1;
display:grid;
grid-template-rows:auto auto auto auto 1fr auto;
height:100dvh;
background:#eef1f5;
overflow:hidden;
min-width:0;
}

.topbar{
background:#c41e3a;
color:white;
display:flex;
justify-content:space-between;
padding:8px 24px;
align-items:center;
min-height:52px;
gap:16px;
flex-wrap:wrap;
}

.topbar-left,
.topbar-nav,
.topbar-actions{
display:flex;
align-items:center;
gap:10px;
}

.topbar-left{
flex:1 1 420px;
min-width:0;
flex-wrap:nowrap;
}

.topbar-module-brand{
display:inline-flex;
align-items:center;
flex:0 0 auto;
margin-right:2px;
color:#1D3F8F;
font-size:24px;
font-weight:800;
letter-spacing:.04em;
line-height:1;
text-decoration:none;
white-space:nowrap;
}

.topbar-nav{
flex-wrap:nowrap;
overflow-x:auto;
overflow-y:hidden;
scrollbar-width:none;
white-space:nowrap;
}

.topbar-nav::-webkit-scrollbar{
display:none;
}

.topbar-nav-link{
display:inline-flex;
align-items:center;
justify-content:center;
padding:8px 14px;
border-radius:999px;
border:1px solid rgba(255,255,255,.42);
background:rgba(255,255,255,.10);
color:#ffffff;
text-decoration:none;
font-size:14px;
font-weight:700;
line-height:1;
transition:background .2s ease, transform .2s ease, border-color .2s ease;
}

.topbar-nav-link:hover{
background:rgba(255,255,255,.20);
transform:translateY(-1px);
}

.topbar-nav-link.active{
background:#ffffff;
border-color:#ffffff;
color:#c41e3a;
}

body.panel-page .topbar{
padding:4px 12px;
gap:8px;
flex-wrap:nowrap;
}

body.panel-page .topbar-left{
flex:1 1 auto;
min-width:0;
gap:6px;
flex-wrap:nowrap;
}

body.panel-page .topbar-nav{
flex:1 1 auto;
min-width:0;
gap:4px;
overflow-x:hidden;
}

body.panel-page .topbar-nav-link{
padding:5px 8px;
font-size:11px;
}

body.panel-page .search{
min-width:100px;
max-width:150px;
padding:5px 7px;
font-size:11px;
}

body.panel-page .top-info{
flex:0 0 auto;
gap:6px;
flex-wrap:nowrap;
font-size:11px;
}

body.panel-page .modo-btn{
min-width:32px;
min-height:32px;
padding:0 8px;
font-size:14px;
border-radius:10px;
}

body.panel-page .cerrar-sesion-btn{
padding:6px 9px;
font-size:11px;
border-radius:10px;
}

body.panel-page .avatar{
width:26px;
height:26px;
}

body.tools-page .main{
display:flex;
flex-direction:column;
overflow:hidden;
}

body.tools-page .tools-scroll-area{
flex:1 1 auto;
overflow-x:auto;
overflow-y:auto;
padding:0 0 8px;
}

body.tools-page .tools-shell{
width:max-content;
min-width:100%;
margin:0;
}

body.tools-page .tools-grid-top{
grid-template-columns:minmax(280px,360px) minmax(520px,1fr) minmax(280px,340px);
min-width:1160px;
}

body.tools-page .tools-grid-devices{
grid-template-columns:repeat(3,minmax(320px,1fr));
min-width:1160px;
}

.search{
padding:7px 10px;
border-radius:8px;
border:none;
font-weight:600;
font-size:13px;
min-width:160px;
flex:1 1 160px;
max-width:240px;
}

.top-info{
display:flex;
align-items:center;
gap:14px;
flex-wrap:wrap;
justify-content:flex-end;
}

.usuario{
display:inline-flex;
align-items:center;
gap:8px;
white-space:nowrap;
}

#fecha{
white-space:nowrap;
}

.cerrar-sesion-btn{
border:1px solid rgba(255,255,255,.2);
border-radius:14px;
background:linear-gradient(135deg,#d93d57,#8f1228);
color:#ffffff;
font-size:13px;
font-weight:800;
padding:10px 15px;
cursor:pointer;
box-shadow:var(--ui-button-glow);
transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.cerrar-sesion-btn:hover{
transform:translateY(-2px);
filter:brightness(1.04);
box-shadow:var(--ui-button-glow-hover);
}

.cerrar-sesion-btn:active{
transform:translateY(0) scale(.985);
box-shadow:var(--ui-button-glow-active);
}

.cerrar-sesion-btn:focus-visible{
outline:none;
box-shadow:var(--ui-button-focus-ring), var(--ui-button-glow-hover);
}

.cerrar-sesion-btn:disabled{
opacity:.7;
cursor:not-allowed;
}

.modo-btn{
background:linear-gradient(135deg,rgba(255,255,255,.2),rgba(255,255,255,.08));
border:1px solid rgba(255,255,255,.26);
border-radius:14px;
min-width:44px;
min-height:44px;
padding:0 12px;
font-size:20px;
cursor:pointer;
color:white;
box-shadow:var(--ui-button-glow);
transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.modo-btn:hover{
transform:translateY(-2px);
box-shadow:var(--ui-button-glow-hover);
filter:brightness(1.04);
}

.modo-btn:active{
transform:translateY(0) scale(.985);
box-shadow:var(--ui-button-glow-active);
}

.modo-btn:focus-visible{
outline:none;
box-shadow:var(--ui-button-focus-ring), var(--ui-button-glow-hover);
}

.avatar{
width:34px;
height:34px;
border-radius:50%;
border:2px solid white;
}

.avatar-mini{
width:26px;
height:26px;
border-radius:50%;
margin-right:6px;
border:2px solid #d1d5db;
background:#f3f4f6;
}

.welcome{
padding:4px 26px 0 26px;
}

.welcome h2{
margin:0;
font-size:26px;
line-height:1.1;
}

.welcome p{
margin:2px 0 0 0;
}

/* TARJETAS */

.cards{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:14px;
padding:0 26px;
margin-top:8px;
}

.card{
padding:14px 16px;
border-radius:22px;
color:#0f172a;
border:1px solid rgba(255,255,255,.2);
box-shadow:0 14px 24px rgba(15,23,42,.14);
min-height:96px;
display:flex;
flex-direction:column;
justify-content:center;
position:relative;
overflow:hidden;
cursor:default;
}

.card::before{
content:'';
position:absolute;
inset:0;
background:linear-gradient(180deg,rgba(255,255,255,.22),transparent 42%);
pointer-events:none;
}

.card-icon{
font-size:26px;
margin-bottom:2px;
}

.card h3{
margin:0;
font-size:16px;
line-height:1.1;
}

.card .numero{
font-size:22px;
font-weight:bold;
line-height:1.1;
margin-top:2px;
}

.clientes{
background:linear-gradient(135deg,#8fe6ef,#5fcfd8);
}

.causas{
background:linear-gradient(135deg,#14b8a6,#0f766e);
}

.audiencias{
background:linear-gradient(135deg,#8b5cf6,#6d28d9);
}

.tareas{
background:linear-gradient(135deg,#c9966b,#9b6844);
}

.card.audiencias .card-icon{
color:#fef08a;
text-shadow:0 0 8px rgba(254,240,138,.5);
}

.card.tareas .card-icon{
color:#22d3ee;
text-shadow:0 0 8px rgba(34,211,238,.55);
}

/* BOTONES */

.acciones{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:10px;
padding:8px 26px;
}

.acciones button{
padding:12px 14px;
border:1px solid rgba(255,255,255,.18);
border-radius:18px;
color:white;
cursor:pointer;
font-weight:800;
font-size:13px;
box-shadow:var(--ui-button-glow);
line-height:1.15;
min-height:58px;
transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
position:relative;
}

.acciones button:hover{
transform:translateY(-2px);
box-shadow:var(--ui-button-glow-hover);
filter:brightness(1.04);
}

.acciones button:active{
transform:translateY(0) scale(.985);
box-shadow:var(--ui-button-glow-active);
}

.acciones button:focus-visible{
outline:none;
box-shadow:var(--ui-button-focus-ring), var(--ui-button-glow-hover);
}

.b1{background:linear-gradient(135deg,#67e8f9,#22c3e6);}
.b2{background:linear-gradient(135deg,#2dd4bf,#14b8a6);}
.b3{background:linear-gradient(135deg,#c4b5fd,#8b5cf6);}
.b4{background:linear-gradient(135deg,#d8b08c,#bc8d67);}

.panel-quick-modal-overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
display:none;
align-items:center;
justify-content:center;
padding:24px;
background:rgba(12,31,52,.42);
z-index:2000;
}

.panel-quick-modal-overlay.is-open{
display:flex;
}

body.panel-page.modal-open{
overflow:hidden;
}

.panel-quick-modal{
width:min(560px,100%);
background:#ffffff;
border-radius:22px;
box-shadow:0 24px 48px rgba(0,0,0,.30);
padding:24px;
color:#0f172a;
display:grid;
gap:18px;
}

.panel-quick-modal-header{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:16px;
}

.panel-quick-modal-title{
margin:0;
font-size:28px;
line-height:1.1;
color:#0c1f34;
}

.panel-quick-modal-subtitle{
margin:8px 0 0 0;
font-size:15px;
line-height:1.45;
color:#475569;
}

.panel-quick-modal-close{
border:1px solid rgba(22,58,95,.14);
border-radius:999px;
background:linear-gradient(135deg,#f8fbff,#dbe7f3);
color:#0c1f34;
width:42px;
height:42px;
display:inline-flex;
align-items:center;
justify-content:center;
font-size:20px;
font-weight:800;
cursor:pointer;
flex-shrink:0;
box-shadow:0 10px 18px rgba(15,23,42,.12);
transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.panel-quick-modal-close:hover{
transform:translateY(-2px);
box-shadow:0 16px 24px rgba(15,23,42,.16);
}

.panel-quick-modal-close:active{
transform:scale(.97);
}

.panel-quick-modal-actions{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
gap:12px;
}

.panel-quick-modal-action{
min-height:56px;
border:1px solid rgba(22,58,95,.16);
border-radius:18px;
padding:12px 16px;
font-size:14px;
font-weight:800;
line-height:1.2;
cursor:pointer;
color:#0c1f34;
background:linear-gradient(135deg,#f8fbff,#dbe7f3);
box-shadow:var(--ui-button-glow);
transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.panel-quick-modal-action:hover{
transform:translateY(-2px);
box-shadow:var(--ui-button-glow-hover);
}

.panel-quick-modal-action:active{
transform:translateY(0) scale(.985);
box-shadow:var(--ui-button-glow-active);
}

.panel-quick-modal-action:focus-visible{
outline:none;
box-shadow:var(--ui-button-focus-ring), var(--ui-button-glow-hover);
}

.panel-quick-modal-action-primary{
color:#ffffff;
background:linear-gradient(135deg,#14b8a6,#0f766e);
}

/* PANELES */

.paneles{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:14px;
padding:8px 26px;
min-height:0;
overflow:hidden;
}

.panel{
padding:12px;
border-radius:16px;
box-shadow:0 10px 16px rgba(0,0,0,.18);
overflow-y:auto;
overflow-x:hidden;
min-height:0;
}

.panel h3{
margin:0 0 8px 0;
font-size:17px;
line-height:1.15;
}

.panel ul{
margin:0;
padding-left:18px;
}

.panel li{
margin-bottom:6px;
line-height:1.2;
}

.panel.actividad{
background:#a5f3fc;
color:#083344;
}

.panel.causas-activas{
background:#5eead4;
color:#064e3b;
}

.panel.audiencias-semana{
background:#c4b5fd;
color:#4c1d95;
}

.panel.alertas{
background:#efd9c6;
color:#5c3416;
}

.footer{
text-align:center;
padding:4px 6px;
font-size:10px;
color:#444;
}

/* DARK MODE */

.dark-mode{
background:#0f172a;
}

.dark-mode .main{
background:#0f172a;
color:#e5e7eb;
}

.dark-mode .footer{
color:#9ca3af;
}

/* PANTALLAS BAJAS */

@media (max-height:760px){

.logo img{
width:180px;
}

.logo h1{
font-size:24px;
}

.menu a{
padding:8px 10px;
font-size:14px;
}

.card{
min-height:66px;
}

}

/* ESCALADO MOVIL / TABLET COMPACTA */

@media (max-width:768px){

html,body{
margin:0;
padding:0;
width:100%;
height:100%;
overflow:auto;
background:#eef1f5;
}

.mobile-stage{
width:100%;
min-height:100dvh;
overflow:visible;
position:relative;
}

#appLayout{
width:100%;
min-height:100dvh;
transform:none !important;
position:static !important;
left:auto !important;
top:auto !important;
overflow:visible;
}

.layout{
flex-direction:column;
height:auto;
min-height:100dvh;
overflow:visible;
}

.sidebar{
width:100%;
height:auto;
padding:10px 12px;
box-shadow:none;
}

body.panel-page .sidebar{
--panel-menu-offset:41px;
}

.logo{
margin:8px 0 14px 0;
}

.menu{
gap:8px;
}

body.panel-page .menu{
margin-top:var(--panel-menu-offset);
}

.main{
height:auto;
min-height:calc(100dvh - 1px);
grid-template-rows:auto auto auto auto auto auto;
overflow:visible;
}

.topbar,
.welcome,
.cards,
.acciones,
.paneles,
.footer{
padding-left:12px;
padding-right:12px;
}

.topbar{
padding-top:10px;
padding-bottom:10px;
gap:8px;
flex-wrap:wrap;
}

.search{
width:100%;
}

.top-info{
width:100%;
justify-content:space-between;
flex-wrap:wrap;
row-gap:6px;
}

.topbar-left,
.topbar-nav,
.topbar-actions{
width:100%;
}

.topbar-nav{
justify-content:flex-start;
gap:8px;
flex-wrap:nowrap;
overflow-x:auto;
}

.topbar-nav-link{
flex:0 0 auto;
padding:7px 12px;
}

.cerrar-sesion-btn{
width:100%;
}

body.panel-page .topbar{
flex-wrap:nowrap;
overflow:hidden;
}

body.panel-page .topbar-left,
body.panel-page .topbar-nav,
body.panel-page .top-info{
width:auto;
}

body.panel-page .topbar-left{
flex:1 1 auto;
min-width:0;
}

body.panel-page .topbar-nav{
flex:1 1 auto;
overflow:hidden;
}

body.panel-page .search{
width:112px;
min-width:112px;
flex:0 0 112px;
}

body.panel-page .top-info{
flex:0 0 auto;
justify-content:flex-end;
row-gap:0;
}

body.panel-page .cerrar-sesion-btn{
width:auto;
}

.welcome{
padding-top:8px;
}

.cards,
.acciones,
.paneles{
grid-template-columns:1fr;
gap:10px;
}

.acciones button{
min-height:48px;
}

.panel-quick-modal-overlay{
padding:16px;
}

.panel-quick-modal{
padding:20px;
}

.panel-quick-modal-title{
font-size:24px;
}

.paneles{
overflow:visible;
}

.panel{
max-height:none;
}

.sidebar .user-status{
display:none;
}

}

/* PANEL EN MOVIL: MANTENER MISMO LAYOUT DE PC */

@media (max-width:480px){
.logo img{
width:130px;
}

.logo h1{
font-size:20px;
}

.logo p,
.autor{
font-size:11px;
}

body.panel-page .mobile-stage{
width:100%;
height:100dvh;
min-height:100dvh;
overflow:auto;
position:relative;
}

body.panel-page #appLayout,
body.panel-page .layout{
width:1360px;
min-width:1360px;
min-height:100dvh;
height:100dvh;
display:flex;
flex-direction:row;
overflow:hidden;
position:static !important;
transform:none !important;
}

body.panel-page .sidebar{
width:300px;
height:100dvh;
padding:18px 20px 12px;
box-shadow:4px 0 18px rgba(0,0,0,.35);
--panel-menu-offset:41px;
}

body.panel-page .logo{
margin-top:20px;
margin-bottom:20px;
}

body.panel-page .logo img{
width:200px;
}

body.panel-page .logo h1{
font-size:28px;
}

body.panel-page .logo p,
body.panel-page .autor{
font-size:13px;
}

body.panel-page .menu{
margin-top:var(--panel-menu-offset);
}

body.panel-page .sidebar .user-status{
display:block;
}

body.panel-page .main{
height:100dvh;
min-height:100dvh;
grid-template-rows:auto auto auto auto 1fr auto;
overflow:hidden;
}

body.panel-page .topbar,
body.panel-page .welcome,
body.panel-page .cards,
body.panel-page .acciones,
body.panel-page .paneles,
body.panel-page .footer{
padding-left:26px;
padding-right:26px;
}

body.panel-page .topbar{
padding-top:8px;
padding-bottom:8px;
gap:8px;
flex-wrap:nowrap;
justify-content:flex-start;
overflow-x:hidden;
overflow-y:hidden;
scrollbar-width:none;
}

body.panel-page .topbar::-webkit-scrollbar{
display:none;
}

body.panel-page .search{
width:108px;
min-width:108px;
flex:0 0 108px;
padding-left:8px;
padding-right:8px;
}

body.panel-page .topbar-left{
flex:1 1 auto;
min-width:0;
flex-wrap:nowrap;
gap:8px;
overflow:hidden;
}

body.panel-page .topbar-nav{
gap:8px;
overflow:hidden;
flex:1 1 auto;
}

body.panel-page .topbar-nav-link{
padding:8px 10px;
font-size:13px;
}

body.panel-page .top-info{
width:auto;
flex:0 0 auto;
justify-content:flex-start;
flex-wrap:nowrap;
white-space:nowrap;
gap:8px;
font-size:13px;
}

body.panel-page .cards,
body.panel-page .acciones,
body.panel-page .paneles{
grid-template-columns:repeat(4,1fr);
gap:14px;
}

body.panel-page .acciones button{
min-height:54px;
}

body.panel-page .paneles{
overflow:hidden;
}

body.panel-page .panel{
max-height:none;
}
}

@media (max-width:480px){
.panel-quick-modal-overlay{
padding:12px;
}

.panel-quick-modal{
padding:18px;
border-radius:18px;
}

.panel-quick-modal-header{
gap:12px;
}

.panel-quick-modal-title{
font-size:22px;
}

.panel-quick-modal-subtitle{
font-size:14px;
}

.panel-quick-modal-actions{
grid-template-columns:1fr;
}
}

/* LOGIN */

.login-page{
margin:0;
min-height:100dvh;
display:grid;
place-items:center;
background:#8a1027;
overflow:auto;
}

.login-shell{
width:100%;
padding:20px;
display:grid;
place-items:center;
}

.login-card{
width:min(430px,100%);
background:#ffffff;
border-radius:20px;
padding:28px 24px;
box-shadow:0 22px 44px rgba(0,0,0,.32);
display:grid;
gap:12px;
}

.login-logo{
width:100px;
margin:0 auto 6px auto;
display:block;
animation:logoTraverseAndSpin 4.4s cubic-bezier(.65,0,.35,1) forwards;
transform-origin:center;
will-change:transform;
}

.login-logo-track{
position:relative;
width:min(320px,100%);
margin:0 auto 6px auto;
min-height:110px;
display:flex;
justify-content:center;
align-items:center;
overflow:visible;
}

.login-brand-stack{
text-align:center;
display:grid;
gap:2px;
margin:-2px 0 6px 0;
}

.login-brand-title,
.login-brand-subtitle,
.login-brand-author{
margin:0;
color:#d4af37;
text-shadow:0 2px 8px rgba(0,0,0,.18);
}

.login-brand-title{
font-size:18px;
font-weight:900;
letter-spacing:2px;
}

.login-brand-subtitle{
font-size:13px;
font-weight:700;
}

.login-brand-author{
font-size:12px;
font-weight:700;
}

@keyframes logoTraverseAndSpin{
0%{
transform:translateX(-120px) rotateY(0deg);
}
42%{
transform:translateX(120px) rotateY(0deg);
}
72%{
transform:translateX(0) rotateY(0deg);
}
100%{
transform:translateX(0) rotateY(1080deg);
}
}

.login-card h1{
margin:0;
text-align:center;
font-size:28px;
color:#0c1f34;
}

.login-subtitle{
margin:0;
text-align:center;
font-size:14px;
color:#475569;
}

.login-form{
display:grid;
gap:8px;
}

.login-form label{
font-weight:700;
font-size:14px;
color:#1e293b;
margin-top:4px;
}

.login-form input{
width:100%;
border:1px solid #cbd5e1;
border-radius:10px;
padding:11px 12px;
font-size:14px;
background:#ffffff;
color:#1e293b;
}

.login-form input:focus{
outline:2px solid #c41e3a;
outline-offset:1px;
}

.login-actions{
margin-top:10px;
display:flex;
justify-content:space-between;
align-items:center;
gap:12px;
flex-wrap:wrap;
}

.login-link{
color:#c41e3a;
font-size:13px;
font-weight:600;
text-decoration:none;
}

.login-link:hover{
text-decoration:underline;
}

.login-actions button{
border:none;
border-radius:12px;
background:linear-gradient(135deg,#c41e3a,#ff2647);
color:#fff;
font-weight:700;
font-size:14px;
padding:10px 18px;
cursor:pointer;
}

.login-actions button:disabled{
opacity:.7;
cursor:not-allowed;
}

.auth-status{
margin:4px 0 0 0;
min-height:20px;
font-size:13px;
font-weight:700;
}

.auth-status.error{
color:#dc2626;
}

.auth-status.ok{
color:#16a34a;
}

/* TRANSICIÓN */

.transition-page{
margin:0;
min-height:100dvh;
display:block;
background:linear-gradient(180deg,#0c1f34 0%,#17385f 26%,#315c87 48%,#6c3b57 66%,#d7263d 84%,#b11226 100%);
overflow:hidden;
position:relative;
}

.transition-page::before{
content:"";
position:absolute;
inset:0;
background:radial-gradient(circle at center, rgba(255,255,255,.10) 0%, rgba(255,255,255,.04) 28%, transparent 60%);
pointer-events:none;
}

.transition-shell{
position:relative;
width:100%;
height:100dvh;
padding:0;
display:block;
text-align:center;
overflow:hidden;
background:transparent;
border:none;
box-shadow:none;
backdrop-filter:none;
}

.transition-brand-motion{
position:absolute;
inset:0;
overflow:hidden;
pointer-events:none;
}

.transition-brand-unit{
position:absolute;
top:50%;
left:0;
width:min(90vw,980px);
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
transform:translate(-50%,-50%);
animation:brandTravel 30s linear forwards;
will-change:transform, opacity;
}

.transition-logo{
width:400px;
max-width:100%;
transform-style:preserve-3d;
animation:coinSpin 30s linear forwards;
will-change:transform;
}

body.transition-page .brand-logo-transparent{
filter:
var(--brand-logo-filter)
drop-shadow(0 16px 30px rgba(0,0,0,.40))
drop-shadow(0 0 14px rgba(212,175,55,.32));
}

.transition-brand-unit h1{
margin:18px 0 8px 0;
font-size:56px;
letter-spacing:3px;
line-height:1.05;
color:var(--brand-gold);
text-shadow:0 4px 14px rgba(0,0,0,.32);
opacity:0;
animation:copyReveal 30s linear forwards;
}

.transition-subtitle{
margin:0;
font-size:26px;
font-weight:700;
line-height:1.2;
color:var(--brand-gold);
text-shadow:0 4px 14px rgba(0,0,0,.26);
opacity:0;
animation:copyReveal 30s linear forwards;
}

.transition-author{
margin:8px 0 0 0;
font-size:24px;
font-weight:700;
line-height:1.2;
color:var(--brand-gold);
text-shadow:0 4px 14px rgba(0,0,0,.26);
opacity:0;
animation:copyReveal 30s linear forwards;
}

#transition-message{
position:absolute;
left:50%;
bottom:88px;
transform:translateX(-50%);
width:min(92vw,900px);
margin:0;
font-size:17px;
font-weight:700;
color:#ffe8ee;
text-align:center;
text-shadow:0 2px 10px rgba(0,0,0,.32);
z-index:5;
}

.transition-shell p.error{
color:#ffd4d4;
}

.transition-spinner{
position:absolute;
left:50%;
bottom:28px;
transform:translateX(-50%);
width:52px;
height:52px;
border-radius:50%;
border:4px solid rgba(255,228,235,.35);
border-top-color:#ffd5df;
animation:spin 1s linear infinite;
margin-top:0;
z-index:5;
}

.transition-link{
position:absolute;
right:20px;
bottom:20px;
font-size:13px;
font-weight:700;
color:#ffe4eb;
text-decoration:none;
z-index:6;
}

.transition-link:hover{
text-decoration:underline;
}

@keyframes spin{
from{transform:translateX(-50%) rotate(0deg);}
to{transform:translateX(-50%) rotate(360deg);}
}

@keyframes brandTravel{
0%{transform:translate(-50%,-50%);}
33.333%{transform:translate(calc(50vw - 50%),-50%);}
66.666%{transform:translate(calc(50vw - 50%),-50%);}
100%{transform:translate(calc(100vw + 50%),-50%);}
}

@keyframes coinSpin{
0%,33.333%{transform:rotateY(0deg);}
66.666%,100%{transform:rotateY(2160deg);}
}

@keyframes copyReveal{
0%,32%{opacity:0;}
33.333%,99%{opacity:1;}
100%{opacity:0;}
}

@media (min-width:901px){
#transition-message{
font-size:14px;
bottom:40px;
}
}

@media (max-width:900px){
.transition-brand-unit{
width:min(92vw,760px);
}

.transition-logo{
width:300px;
}

.transition-brand-unit h1{
font-size:40px;
}

.transition-subtitle{
font-size:20px;
}

.transition-author{
font-size:18px;
}

#transition-message{
font-size:15px;
bottom:82px;
padding:0 14px;
}
}

@media (max-width:520px){
.transition-brand-unit{
width:min(94vw,380px);
}

.transition-logo{
width:220px;
}

.transition-brand-unit h1{
font-size:26px;
letter-spacing:2px;
}

.transition-subtitle{
font-size:15px;
}

.transition-author{
font-size:13px;
}

#transition-message{
font-size:13px;
bottom:78px;
padding:0 14px;
}
}

.panel-list-empty{
list-style:none;
padding-left:0;
opacity:.76;
}

.panel-alert-groups{
display:grid;
gap:10px;
}

.panel-alert-group{
background:rgba(255,255,255,.28);
border:1px solid rgba(255,255,255,.36);
border-radius:14px;
padding:10px;
}

.panel-alert-group h4{
margin:0 0 8px 0;
font-size:14px;
}

.panel-alert-group ul,
.panel.alertas ul,
.panel.audiencias-semana ul,
.panel.actividad ul,
.panel.causas-activas ul{
list-style:none;
padding:0;
display:grid;
gap:8px;
}

.panel-alert-item,
.panel-case-item{
background:rgba(255,255,255,.5);
border-radius:12px;
padding:10px;
border:1px solid rgba(15,23,42,.08);
}

.panel-alert-item strong,
.panel-case-item strong{
display:block;
margin-bottom:4px;
}

.panel-alert-item p,
.panel-case-item p{
margin:0 0 6px 0;
line-height:1.35;
}

.panel-alert-head,
.panel-alert-meta{
display:flex;
flex-wrap:wrap;
gap:6px;
margin-bottom:6px;
font-size:12px;
}

.panel-alert-badge,
.panel-alert-category,
.panel-alert-tags li{
display:inline-flex;
align-items:center;
border-radius:999px;
padding:3px 8px;
font-weight:700;
}

.panel-alert-badge{
background:rgba(15,23,42,.14);
}

.panel-alert-badge.module-agenda{background:rgba(109,40,217,.16);color:#4c1d95;}
.panel-alert-badge.module-clientes{background:rgba(14,165,233,.18);color:#0c4a6e;}
.panel-alert-badge.module-causas{background:rgba(13,148,136,.18);color:#134e4a;}

.panel-alert-category{
background:rgba(255,255,255,.5);
font-weight:600;
}

.panel-alert-meta span{
background:rgba(255,255,255,.4);
padding:3px 8px;
border-radius:999px;
}

.panel-alert-tags{
list-style:none;
padding:0;
margin:0;
display:flex;
flex-wrap:wrap;
gap:6px;
}

.panel-alert-tags li{
background:rgba(255,255,255,.52);
font-size:11px;
font-weight:600;
}

.panel-alert-note{
margin-top:6px;
font-size:12px;
opacity:.9;
}

.panel-alert-link{
display:inline-flex;
margin-top:6px;
font-size:12px;
font-weight:700;
color:#163A5F;
text-decoration:none;
}

.panel-alert-link:hover,
.panel-alert-link:focus-visible{
text-decoration:underline;
}

.urgency-alta{box-shadow:inset 0 0 0 1px rgba(185,28,28,.2);}
.urgency-media{box-shadow:inset 0 0 0 1px rgba(194,65,12,.18);}
.urgency-baja{box-shadow:inset 0 0 0 1px rgba(161,98,7,.18);}

/* ===== MONITOREO ===== */
.monitoreo-page{
  margin:0;
  min-height:100dvh;
  overflow-x:auto;
  overflow-y:auto;
  background:linear-gradient(180deg,#12333f 0%,#1f5a6d 100%);
  color:#ecf8ff;
  font-family:Arial,sans-serif;
}
.monitoreo-topbar{
  position:sticky;
  top:0;
  z-index:30;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  padding:12px 16px;
  background:rgba(8,20,30,.9);
  border-bottom:1px solid rgba(255,255,255,.14);
}
.monitoreo-brand{font-weight:800;letter-spacing:.04em;}
.monitoreo-nav{display:flex;gap:8px;flex-wrap:wrap;}
.monitoreo-nav a{color:#d8efff;text-decoration:none;padding:8px 12px;border-radius:12px;border:1px solid rgba(216,239,255,.24);}
.monitoreo-nav a.active{background:#2d7c74;color:#fff;border-color:#2d7c74;}
.monitoreo-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;}
.monitoreo-workspace{
  display:grid;
  grid-template-columns:320px 1fr;
  gap:12px;
  padding:12px;
}
.monitoreo-sidebar,
.monitoreo-editor,
.monitoreo-card{
  background:rgba(7,18,27,.55);
  border:1px solid rgba(255,255,255,.16);
  border-radius:16px;
}
.monitoreo-sidebar{padding:12px;display:flex;flex-direction:column;gap:10px;max-height:none;overflow:visible;}
.monitoreo-case-list{display:flex;flex-direction:column;gap:8px;}
.monitoreo-editor{padding:12px;display:grid;gap:12px;}
.monitoreo-editor-header h1{margin:0 0 4px;font-size:22px;}
.monitoreo-editor-header p{margin:0;color:#c3dded;}
.monitoreo-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.monitoreo-card{padding:12px;}
.monitoreo-card h3{margin:0 0 10px;font-size:17px;}
.monitoreo-table{width:100%;border-collapse:collapse;}
.monitoreo-table th,.monitoreo-table td{border:1px solid rgba(255,255,255,.14);padding:8px;vertical-align:top;font-size:13px;}
.monitoreo-table input,.monitoreo-card select{width:100%;border-radius:8px;border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.92);padding:6px;color:#0f2f3f;}
.monitoreo-list-item{border:1px solid rgba(255,255,255,.2);border-radius:12px;background:rgba(255,255,255,.08);color:#fff;padding:10px;text-align:left;cursor:pointer;}
.monitoreo-list-item.active{background:#2d7c74;border-color:#88c1b7;}
.monitoreo-suggestions{margin:0;padding-left:18px;display:grid;gap:6px;}
.card-head-row{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px;}

@media (max-width: 1100px){
  .monitoreo-workspace{grid-template-columns:1fr;}
  .monitoreo-grid{grid-template-columns:1fr;}
}

/* ===== Auditoría visual: descarga automática masiva desde PJUD ===== */
.massive-control__grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:12px;
align-items:end;
}

.massive-control__actions{
display:flex;
flex-wrap:wrap;
gap:10px;
}

.massive-audit__grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:12px;
}

.massive-audit__card{
border:1px solid rgba(15,23,42,.1);
border-radius:14px;
padding:12px;
background:#fbfcff;
}

.massive-audit__card h3{
margin:0 0 8px;
font-size:1rem;
}

.massive-audit__card p{
margin:4px 0;
}

.massive-audit__card--full{
grid-column:1/-1;
}

.massive-highlight{
font-weight:700;
color:#163a5f;
}

.massive-stats{
margin:0;
padding-left:18px;
display:grid;
gap:4px;
}

.massive-steps{
margin:0;
padding:0;
list-style:none;
display:grid;
gap:10px;
}

.massive-step{
border:1px solid rgba(15,23,42,.12);
border-radius:12px;
padding:10px;
background:#fff;
}

.massive-step__header{
display:flex;
justify-content:space-between;
gap:8px;
align-items:center;
font-size:.92rem;
margin-bottom:6px;
}

.massive-step__index{
font-weight:700;
}

.massive-step__status{
font-weight:700;
}

.massive-step__name{
font-weight:600;
margin-bottom:4px;
}

.massive-step__detail{
font-size:.92rem;
color:#46515f;
}

.massive-step--current{
border-color:#163a5f;
box-shadow:0 0 0 2px rgba(22,58,95,.12);
}

.massive-step--pending .massive-step__status{ color:#5f6d7a; }
.massive-step--running .massive-step__status{ color:#135fb2; }
.massive-step--success .massive-step__status{ color:#1d7a35; }
.massive-step--warning .massive-step__status{ color:#9f5c00; }
.massive-step--failed .massive-step__status{ color:#aa1f2d; }
.massive-step--retrying .massive-step__status{ color:#5f2eb3; }
.massive-step--blocked .massive-step__status{ color:#7e5f00; }

.massive-log{
margin:0;
padding-left:18px;
display:grid;
gap:4px;
max-height:280px;
overflow:auto;
}

.flow-mode-selector{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:10px;
}

.flow-mode-option{
display:grid;
gap:6px;
border:1px solid rgba(15,23,42,.12);
border-radius:12px;
padding:12px;
background:#fff;
}

.assisted-grid{
display:grid;
grid-template-columns:1fr;
gap:12px;
}

.assisted-diagnostic-panel{
border:1px solid rgba(15,23,42,.12);
border-radius:12px;
padding:10px;
background:#fff;
}

.assisted-step-list{
list-style:none;
padding:0;
margin:0;
display:grid;
gap:10px;
}

.assisted-step{
display:grid;
grid-template-columns:1fr auto;
gap:10px;
border:1px solid rgba(15,23,42,.12);
border-radius:12px;
background:#fff;
padding:10px;
align-items:center;
}

.assisted-step__actions{
display:grid;
gap:8px;
justify-items:end;
}

.assisted-step__status{
font-weight:700;
}

.assisted-step--pending .assisted-step__status{color:#5f6d7a;}
.assisted-step--running .assisted-step__status{color:#135fb2;}
.assisted-step--success .assisted-step__status{color:#1d7a35;}
.assisted-step--error .assisted-step__status{color:#aa1f2d;}