/* ===================================================
   SOMOS MÁS CON VOS — panel.css
   Sistema de diseño del panel interno (afiliados + legajos)
   Basado en la identidad visual de somos-estilo.css
   =================================================== */
:root{
  --somos-verde:#0F5C3A;
  --somos-verde-oscuro:#0a3d27;
  --somos-verde-claro:#e8f5ee;
  --somos-celeste:#6EC4E8;
  --somos-amarillo:#F5C800;
  --somos-marron:#8B5A2B;
  --somos-gris:#4a5568;
  --somos-gris-claro:#f6f9f7;
  --somos-gris-borde:#e3e8e5;
  --somos-rojo:#dc2626;
  --somos-rojo-claro:#fef2f2;
  --somos-naranja:#d97706;
  --somos-naranja-claro:#fef8ec;
  --blanco:#ffffff;
  --fuente-titulo: Georgia, 'Times New Roman', serif;
  --fuente-cuerpo: 'Segoe UI', system-ui, Arial, sans-serif;
  --radio-sm:8px;
  --radio-md:14px;
  --radio-lg:20px;
  --sombra-sm:0 3px 12px rgba(0,0,0,.06);
  --sombra-md:0 8px 24px rgba(0,0,0,.10);
  --transicion:.2s ease;
  --sidebar-ancho:230px;
}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family:var(--fuente-cuerpo);
  color:var(--somos-gris);
  line-height:1.55;
  background:var(--somos-gris-claro);
  font-size:15px;
}
h1,h2,h3{font-family:var(--fuente-titulo); color:var(--somos-verde); margin:0 0 4px;}
a{color:inherit;}
img{max-width:100%;}

/* ===== LOGIN (pantalla completa, sin sidebar) ===== */
.pantalla-login{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 30% 20%, #1a7a4d, var(--somos-verde) 45%, var(--somos-verde-oscuro) 100%);
  padding:20px;
}
.caja-login{
  background:#fff; border-radius:var(--radio-lg); padding:36px 30px;
  width:100%; max-width:380px; box-shadow:var(--sombra-md);
  text-align:center;
}
.caja-login img.logo{height:56px; margin-bottom:14px;}
.caja-login h1{font-size:1.3rem; margin-bottom:4px;}
.caja-login p.subtitulo{color:var(--somos-gris); font-size:.85rem; margin-bottom:22px;}
.caja-login form{text-align:left;}

/* ===== LAYOUT GENERAL CON SIDEBAR ===== */
.app-shell{display:flex; min-height:100vh;}
.sidebar{
  width:var(--sidebar-ancho); background:var(--somos-verde-oscuro); color:#fff;
  padding:22px 16px; flex-shrink:0; display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.sidebar .marca{display:flex; align-items:center; gap:10px; margin-bottom:28px; padding:0 6px;}
.sidebar .marca img{height:34px;}
.sidebar .marca span{font-weight:800; font-size:.95rem; line-height:1.2;}
.sidebar nav{display:flex; flex-direction:column; gap:3px; flex:1;}
.sidebar nav a{
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px;
  color:#cfe3d6; text-decoration:none; font-size:.88rem; font-weight:600;
  transition:background var(--transicion), color var(--transicion);
}
.sidebar nav a svg{width:18px; height:18px; flex-shrink:0;}
.sidebar nav a:hover{background:rgba(255,255,255,.08); color:#fff;}
.sidebar nav a.activo{background:var(--somos-amarillo); color:#3a2c00;}
.sidebar .usuario-box{
  border-top:1px solid rgba(255,255,255,.14); padding-top:14px; margin-top:14px; font-size:.8rem;
}
.sidebar .usuario-box .nombre{font-weight:700; color:#fff;}
.sidebar .usuario-box .rol{color:#8fb09e; text-transform:capitalize;}
.sidebar .usuario-box a{color:var(--somos-amarillo); text-decoration:none; font-weight:600; display:inline-block; margin-top:6px;}

.contenido{flex:1; padding:26px 28px; max-width:1100px;}
.topbar-mobile{display:none;}

/* ===== TARJETAS ===== */
.card{
  background:#fff; border-radius:var(--radio-lg); padding:22px 24px;
  box-shadow:var(--sombra-sm); margin-bottom:20px; border-top:3px solid var(--somos-amarillo);
}
.card h2{font-size:1.15rem; margin-bottom:14px;}
.card.plano{border-top-color:var(--somos-celeste);}

.stat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:14px; margin-bottom:20px;}
.stat-box{
  background:#fff; border-radius:var(--radio-md); padding:16px 18px; box-shadow:var(--sombra-sm);
  border-left:4px solid var(--somos-verde);
}
.stat-box .valor{font-size:1.7rem; font-weight:800; color:var(--somos-verde-oscuro); font-family:var(--fuente-titulo);}
.stat-box .etiqueta{font-size:.78rem; color:var(--somos-gris); text-transform:uppercase; letter-spacing:.04em;}

/* ===== FORMULARIOS ===== */
label{display:block; font-size:.8rem; color:var(--somos-gris); font-weight:600; margin:14px 0 5px;}
input[type=text],input[type=password],input[type=number],input[type=email],
input[type=file],select,textarea{
  width:100%; padding:11px 13px; border-radius:10px; border:1.5px solid var(--somos-gris-borde);
  background:#fbfcfb; color:#2b2b2b; font-size:.92rem; font-family:inherit;
  transition:border-color var(--transicion);
}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--somos-celeste); background:#fff;}
textarea{min-height:100px; resize:vertical;}

/* ===== BOTONES ===== */
button, .btn{
  display:inline-flex; align-items:center; gap:8px; justify-content:center;
  margin-top:16px; border:none; padding:11px 20px; border-radius:30px; cursor:pointer;
  font-size:.88rem; font-weight:700; font-family:inherit; text-decoration:none;
  transition:transform var(--transicion), box-shadow var(--transicion), background var(--transicion);
}
button:active, .btn:active{transform:scale(.97);}
.btn-primario{background:var(--somos-amarillo); color:#3a2c00; box-shadow:0 4px 14px rgba(245,200,0,.35);}
.btn-primario:hover{box-shadow:0 6px 18px rgba(245,200,0,.5);}
.btn-verde{background:var(--somos-verde); color:#fff;}
.btn-verde:hover{background:var(--somos-verde-oscuro);}
.btn-rojo{background:var(--somos-rojo); color:#fff;}
.btn-rojo:hover{background:#b91c1c;}
.btn-outline{background:transparent; color:var(--somos-verde); border:1.5px solid var(--somos-verde);}
.btn-outline:hover{background:var(--somos-verde-claro);}
.btn-chico{padding:7px 14px; font-size:.78rem; margin-top:0;}

/* ===== BADGES DE ESTADO ===== */
.badge{
  display:inline-block; padding:4px 12px; border-radius:20px; font-size:.72rem;
  font-weight:700; text-transform:uppercase; letter-spacing:.03em;
}
.badge-pendiente{background:var(--somos-naranja-claro); color:var(--somos-naranja);}
.badge-aprobado{background:var(--somos-verde-claro); color:var(--somos-verde);}
.badge-rechazado{background:var(--somos-rojo-claro); color:var(--somos-rojo);}
.badge-neutro{background:#eef1ef; color:var(--somos-gris);}

/* ===== TABLAS ===== */
.tabla-wrap{overflow-x:auto; border-radius:var(--radio-md);}
table{width:100%; border-collapse:collapse; font-size:.86rem; background:#fff;}
th{
  background:var(--somos-verde-oscuro); color:#fff; text-align:left; padding:11px 14px;
  font-size:.74rem; text-transform:uppercase; letter-spacing:.04em; font-weight:700;
}
th:first-child{border-top-left-radius:var(--radio-md);}
th:last-child{border-top-right-radius:var(--radio-md);}
td{padding:11px 14px; border-bottom:1px solid var(--somos-gris-borde);}
tr:last-child td{border-bottom:none;}
tr:hover td{background:var(--somos-gris-claro);}
a.link{color:var(--somos-verde); text-decoration:none; font-weight:700;}
a.link:hover{color:var(--somos-amarillo);}

/* ===== PREVIEW DE ARCHIVOS ===== */
.archivos-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px; margin-top:14px;}
.archivo-card{
  background:#fbfcfb; border:1.5px solid var(--somos-gris-borde); border-radius:var(--radio-md);
  overflow:hidden; transition:box-shadow var(--transicion), transform var(--transicion); text-decoration:none; color:inherit;
}
.archivo-card:hover{box-shadow:var(--sombra-md); transform:translateY(-2px);}
.archivo-card .miniatura{
  width:100%; aspect-ratio:4/3; object-fit:cover; display:block; background:#eef1ef;
}
.archivo-card .miniatura-pdf{
  width:100%; aspect-ratio:4/3; display:flex; align-items:center; justify-content:center;
  background:var(--somos-rojo-claro); color:var(--somos-rojo); font-size:2.2rem; font-weight:800;
}
.archivo-card .info{padding:9px 11px;}
.archivo-card .info .tipo{font-size:.72rem; font-weight:700; color:var(--somos-verde); text-transform:uppercase;}
.archivo-card .info .meta{font-size:.7rem; color:var(--somos-gris); margin-top:2px;}

/* ===== FLASH / MENSAJES ===== */
.flash{
  background:var(--somos-verde-claro); border-left:4px solid var(--somos-verde); color:var(--somos-verde-oscuro);
  padding:12px 16px; border-radius:8px; margin-bottom:18px; font-size:.88rem; font-weight:600;
}
.flash-error{background:var(--somos-rojo-claro); border-left-color:var(--somos-rojo); color:#7f1d1d;}

/* ===== RESPONSIVE (mobile-first) ===== */
.topbar-mobile{
  display:flex; align-items:center; justify-content:space-between;
  background:var(--somos-verde-oscuro); color:#fff; padding:14px 18px; position:sticky; top:0; z-index:40;
}
.topbar-mobile .marca{display:flex; align-items:center; gap:8px; font-weight:800; font-size:.9rem;}
.topbar-mobile button{margin:0; background:none; padding:6px; box-shadow:none;}
.topbar-mobile svg{width:24px; height:24px; stroke:#fff;}

@media(max-width:860px){
  .app-shell{flex-direction:column;}
  .topbar-mobile{display:flex;}
  .sidebar{
    position:fixed; left:0; top:0; height:100vh; z-index:50;
    transform:translateX(-100%); transition:transform .25s ease; width:78vw; max-width:280px;
  }
  .sidebar.abierto{transform:translateX(0);}
  .sidebar-overlay{
    display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:45;
  }
  .sidebar-overlay.activo{display:block;}
  .contenido{padding:18px 16px;}
  .card{padding:18px 16px;}
  table{font-size:.8rem;}
  th,td{padding:9px 10px;}
}

/* Fix: el logo del topbar mobile no tenía tamaño fijo y se desbordaba */
.topbar-mobile .marca img{
  height: 28px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}