@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --bg:#0A0E14;
  --panel:#10161F;
  --panel-2:#141B26;
  --border:#232C3A;
  --border-soft:#1B222E;
  --text:#E7ECF3;
  --text-dim:#8B96A8;
  --text-faint:#5C6678;
  --cyan:#34D8C4;
  --cyan-dim:#1E8478;
  --green:#34D399;
  --amber:#F2B84B;
  --red:#FF5C5C;
  --orange:#F78829;
}
:root[data-theme="light"]{
  --bg:#F5F7FA;
  --panel:#FFFFFF;
  --panel-2:#EEF1F5;
  --border:#D7DDE6;
  --border-soft:#E6EAF0;
  --text:#1A2233;
  --text-dim:#556074;
  --text-faint:#8B96A8;
  --cyan:#0E8F82;
  --cyan-dim:#B7E8E1;
  --green:#1F9D6C;
  --amber:#B8790E;
  --red:#D93B3B;
  --orange:#F78829;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg); color:var(--text); font-family:'Inter',system-ui,sans-serif;
  line-height:1.5; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1000px; margin:0 auto; padding:32px 20px 60px;}
a{color:var(--cyan); text-decoration:none;}
a:hover{text-decoration:underline;}

h1,h2,h3{font-family:'Space Grotesk',sans-serif; font-weight:700; margin:0 0 8px;}
h1{font-size:28px;}
h2{font-size:20px;}

.app-shell{display:flex; align-items:flex-start; min-height:100vh;}
.sidebar{
  width:230px; flex-shrink:0; box-sizing:border-box;
  background:var(--panel); border-right:1px solid var(--border);
  padding:28px 18px; display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh;
}
.sidebar .brand{display:flex; align-items:center; gap:10px; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:18px; margin-bottom:32px;}
.sidebar .brand .brand-logo{width:34px; height:34px; border-radius:50%; flex-shrink:0; object-fit:cover;}
.sidebar .brand .brand-lumina{color:var(--orange);}
.sidebar .brand .brand-grow{color:var(--text);}
.sidebar-links{display:flex; flex-direction:column; gap:4px;}
.sidebar-links a{padding:10px 14px; border-radius:6px; color:var(--text-dim); font-weight:500; font-size:14px;}
.sidebar-links a:hover{background:var(--panel-2); color:var(--text); text-decoration:none;}
.sidebar-links a.active{background:var(--panel-2); color:var(--cyan);}
.sidebar-user{margin-top:auto; padding-top:18px; border-top:1px solid var(--border-soft); font-size:13px; color:var(--text-dim); display:flex; flex-direction:column; gap:10px;}
.main-content{flex:1; min-width:0;}

.panel{
  background:var(--panel); border:1px solid var(--border); border-radius:8px;
  padding:24px; margin-bottom:20px;
}

.field{display:flex; flex-direction:column; gap:6px; margin-bottom:14px;}
.field label{font-size:13px; color:var(--text-dim);}
.field input, .field select, .field textarea{
  background:var(--bg); border:1px solid var(--border); border-radius:6px;
  padding:10px 12px; color:var(--text); font-family:'Inter',sans-serif; font-size:14px;
}
.field textarea{resize:vertical; min-height:70px;}

/* Campo de contraseña con ojo para mostrar/ocultar lo que se tipea.
   .field es flex y estira sus hijos solos; adentro de este contenedor hay que
   pedirle el ancho al input explícitamente o se encoge a su tamaño por defecto. */
.campo-password{position:relative; display:flex;}
.campo-password input{width:100%; box-sizing:border-box; padding-right:44px;}
.btn-ojo{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:32px; height:32px; padding:0; margin:0;
  display:flex; align-items:center; justify-content:center;
  background:none; border:none; border-radius:6px; cursor:pointer;
  font-size:16px; line-height:1; color:var(--text-dim);
}
.btn-ojo:hover{background:var(--panel-2); color:var(--text);}
.btn-ojo:focus-visible{outline:2px solid var(--cyan); outline-offset:1px;}

/* "Cerrar sesión" dentro del modal de Mi cuenta, separado del formulario para
   que no se confunda con el botón de guardar. */
.cuenta-salir{margin-top:20px; padding-top:16px; border-top:1px solid var(--border-soft);}
.cuenta-salir button{width:100%;}

button{
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:14px;
  border:none; border-radius:6px; padding:10px 18px; cursor:pointer;
}
button.primary{background:var(--cyan); color:#04231F;}
button.primary:hover{filter:brightness(1.08);}
button.ghost{background:transparent; border:1px solid var(--border); color:var(--text-dim); font-family:'Inter',sans-serif; font-weight:500;}
button.ghost:hover{border-color:var(--text-dim); color:var(--text);}
button.danger{background:transparent; border:1px solid var(--red); color:var(--red); font-family:'Inter',sans-serif; font-weight:500; font-size:12px; padding:6px 12px;}

table{width:100%; border-collapse:collapse; font-size:14px;}
th{text-align:left; color:var(--text-faint); font-size:11px; text-transform:uppercase; letter-spacing:0.05em; padding:10px 12px; border-bottom:1px solid var(--border);}
td{padding:12px; border-bottom:1px solid var(--border-soft);}
tr:hover td{background:var(--panel-2);}

.chip{font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:700; padding:3px 9px; border-radius:4px;}
.chip.malo{background:rgba(255,92,92,0.16); color:var(--red);}
.chip.salvable{background:rgba(242,184,75,0.16); color:var(--amber);}
.chip.bueno{background:rgba(52,211,153,0.16); color:var(--green);}
.chip.muybueno{background:rgba(52,216,196,0.16); color:var(--cyan);}

.plan-chip{font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:700; padding:3px 9px; border-radius:4px; white-space:nowrap;}
.plan-chip.anuncios{background:rgba(52,216,196,0.16); color:var(--cyan);}
.plan-chip.capacitacion{background:rgba(242,184,75,0.16); color:var(--amber);}
.plan-chip.completo{background:rgba(247,136,41,0.16); color:var(--orange);}

.error-msg{color:var(--red); font-size:13px; margin-top:10px; display:none;}
.empty-state{color:var(--text-faint); font-size:14px; padding:30px; text-align:center;}

.notif-wrap{position:relative;}
.notif-badge{
  position:absolute; top:-3px; right:-3px;
  background:var(--red); color:#fff; font-size:10px; font-weight:700;
  min-width:16px; height:16px; border-radius:8px; padding:0 3px;
  display:flex; align-items:center; justify-content:center;
  font-family:'IBM Plex Mono',monospace; line-height:1;
}
.notif-panel{
  position:fixed; max-height:400px; overflow-y:auto;
  background:var(--panel); border:1px solid var(--border); border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,0.35);
  z-index:100; padding:8px;
}
.notif-panel-header{display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; padding:4px 6px;}
.notif-panel-header strong{font-size:13px;}
.notif-panel-header button{background:none; border:none; color:var(--cyan); font-size:12px; cursor:pointer; padding:2px;}
.notif-barra{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:2px 6px 8px; margin-bottom:4px; border-bottom:1px solid var(--border-soft);
}
.notif-barra label{
  display:flex; align-items:center; gap:6px;
  font-size:12px; color:var(--text-dim); cursor:pointer;
}
.notif-barra button{
  background:none; border:none; color:var(--red);
  font-size:12px; cursor:pointer; padding:2px;
}
.notif-barra button:disabled{color:var(--text-faint); cursor:default;}
.notif-item{
  display:flex; align-items:flex-start; gap:8px;
  padding:10px 8px; border-radius:6px; font-size:13px;
  color:var(--text); border-bottom:1px solid var(--border-soft);
}
.notif-item:last-child{border-bottom:none;}
.notif-item:hover{background:var(--panel-2);}
.notif-item.no-leida{background:rgba(52,216,196,0.07);}
.notif-texto{flex:1; min-width:0; color:var(--text); text-decoration:none;}
.notif-texto:hover{text-decoration:none;}
.notif-check{flex:none; margin:2px 0 0; cursor:pointer; accent-color:var(--cyan);}
.notif-toggle{
  flex:none; background:none; border:none; cursor:pointer;
  color:var(--text-faint); font-size:12px; line-height:1;
  padding:3px 5px; border-radius:4px;
}
.notif-toggle:hover{color:var(--cyan); background:var(--panel);}
.notif-item .notif-time{display:block; font-size:11px; color:var(--text-faint); margin-top:3px;}

.lg-modal-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,0.6);
  display:flex; align-items:center; justify-content:center;
  z-index:1000; padding:20px;
}
.lg-modal{
  background:var(--panel); border:1px solid var(--border); border-radius:8px;
  padding:24px; width:100%; max-width:400px; max-height:90vh; overflow-y:auto;
}

/* Envoltorio para tablas anchas: la tabla se corre de costado adentro de esta
   caja en vez de empujar la página entera. En pantalla grande las tablas
   entran holgadas, así que acá no hay overflow y no se dibuja ninguna barra:
   por eso la regla puede vivir afuera del @media sin tocar el escritorio. */
.tabla-scroll{overflow-x:auto;}

/* Botón de menú: sólo existe en celular. Oculto acá para que en escritorio no
   se vea ni ocupe lugar (un display:none no participa del flex ni del gap). */
#btnMenu{display:none;}

/* Antes esto era un style="" pegado en el HTML de configuración. Se pasó a
   clase con las mismas tres propiedades (o sea, el escritorio no cambia) para
   que el @media de abajo pueda hacerla bajar de línea en celular: un estilo
   inline no hay forma de sobrescribirlo desde la hoja sin usar !important. */
.fila-archivo{display:flex; gap:10px; align-items:center;}

/* ============================================================
   CELULAR Y TABLET ANGOSTA (768px o menos)
   ------------------------------------------------------------
   Todo lo que sigue vive adentro del @media, así que en una pantalla
   grande el navegador directamente no lo lee: el escritorio no cambia.
   Si alguna vez hay que tocar el escritorio, se hace ARRIBA de este
   bloque, nunca acá adentro.

   El problema que resuelve: .sidebar mide 230px fijos. En un celular de
   375px se llevaba el 61% del ancho y al contenido le quedaban 145px.
   Acá la barra pasa de columna lateral a franja horizontal arriba.
   ============================================================ */
@media (max-width: 768px){
  /* align-items:stretch no es opcional acá. El .app-shell de arriba usa
     align-items:flex-start, que con la barra al costado solo alineaba en
     vertical. Al girar a columna, el eje transversal pasa a ser el horizontal
     y flex-start significa "cada hijo mide lo que mide su contenido": por eso
     .main-content se estiraba a 1022px en Pagos en vez de quedarse en 375. */
  .app-shell{flex-direction:column; align-items:stretch; min-height:0;}

  /* Entre .app-shell y la barra hay un contenedor intermedio (lo declara cada
     página y shared.js le inyecta el <nav> adentro). También es hijo flex, así
     que arrastra el mismo min-width:auto y se niega a bajar de 375px. Sin esta
     línea, todo lo de abajo no sirve de nada: medido, la página quedaba en
     1122px aunque la barra ya tuviera min-width:0. */
  #topbarContainer{min-width:0; max-width:100%; width:100%;}

  /* De columna de 230px a franja completa arriba. Deja de ser sticky y
     de medir 100vh, si no se comía la pantalla entera a lo alto. */
  .sidebar{
    width:100%; max-width:100%; min-width:0; height:auto; position:relative;
    border-right:none; border-bottom:1px solid var(--border);
    padding:14px 16px; gap:12px; box-sizing:border-box;
  }
  .sidebar .brand{margin-bottom:0;}

  /* Anclado arriba a la derecha en vez de meterlo en una fila con el logo:
     así no hay que reestructurar el HTML del shell. */
  #btnMenu{
    display:block; position:absolute; top:12px; right:14px;
    background:var(--panel-2); border:1px solid var(--border); color:var(--text);
    font-size:17px; line-height:1; padding:9px 13px;
    border-radius:6px; cursor:pointer;
  }

  /* Los 9 links quedan plegados y se despliegan en vertical con el botón ☰.
     Se probó antes dejarlos en una fila que se desliza: funcionaba, pero
     obligaba a arrastrar para encontrar la sección.

     min-width:0 no es un detalle: .sidebar-links es hijo de un contenedor
     flex, y un hijo flex arranca con min-width:auto, o sea que se niega a
     achicarse por debajo del ancho de su contenido. Sin esto, los 9 links
     estiraban la barra a ~1100px (medido: la página quedaba en 1122px). */
  .sidebar-links{display:none; min-width:0;}
  .sidebar.menu-abierto .sidebar-links{
    display:flex; flex-direction:column; gap:4px;
    padding-top:6px; border-top:1px solid var(--border-soft);
  }
  .sidebar-links a{padding:11px 12px;}

  .sidebar-user{margin-top:0; padding-top:12px;}

  .wrap{padding:20px 16px 40px;}

  /* El campo de archivo pide ~350px por sí solo y no se achica: en una fila
     junto al botón se iba a 498px. Que baje de línea y ocupe el ancho entero. */
  .fila-archivo{flex-wrap:wrap;}
  .fila-archivo input[type="file"]{flex:1 1 100%; min-width:0; max-width:100%;}

  /* Red de seguridad: el ancho del panel lo calcula shared.js, pero si algo
     fallara nunca puede pasarse del ancho de la pantalla. */
  .notif-panel{max-width:calc(100vw - 24px);}

  /* Los modales ganan ancho útil: 20px de cada lado sobre 375 es mucho. */
  .lg-modal-overlay{padding:12px;}
  .lg-modal{padding:18px; max-height:88vh;}

  /* Safari del iPhone hace zoom solo cuando tocás un campo cuya letra mide
     menos de 16px, y después te deja la página descuadrada. No se puede
     desactivar sin bloquearle también el zoom manual al usuario (que sería
     peor), así que la única solución correcta es que los campos midan 16px.

     Ojo con el selector: no alcanza con "input" a secas. La regla de arriba es
     ".field input", que tiene más especificidad, y la especificidad le gana al
     media query. Hay que repetir el mismo selector para que este pise. */
  input, select, textarea,
  .field input, .field select, .field textarea{font-size:16px;}

  /* Tamaño mínimo para tocar con el dedo: la referencia son 44px. */
  #btnMenu{padding:13px 15px;}
  .notif-toggle{padding:8px 10px; font-size:14px;}
  .notif-check{width:18px; height:18px;}
  .sidebar-user button{min-height:38px;}
}