/* ================================
   Diseño corporativo ALUCISOL
   ================================ */

/* Paleta y sistema */
:root{
  --brand:#0B3954;        /* azul corporativo */
  --brand-600:#082a3d;
  --brand-500:#0B3954;
  --brand-400:#115072;
  --accent:#FFBD00;       /* acento */
  --accent-600:#e3a700;
  --bg:#ffffff;
  --bg-soft:#f7fbff;
  --ink:#0b2431;
  --ink-2:#213445;
  --muted:#647380;
  --border:#e2edf4;
  --ring:#c8e0ef;
  --ok:#1f9d55;
  --danger:#cc3333;

  --radius-lg:16px;
  --radius-md:12px;
  --radius-sm:10px;

  --shadow-sm:0 1px 2px rgba(0,0,0,.04);
  --shadow-md:0 6px 18px rgba(11,57,84,.10);
  --shadow-lg:0 14px 34px rgba(11,57,84,.16);

  --header-h:72px;
  --footer-h:64px;

  --speed-fast:.15s;
  --speed-med:.25s;
}

/* Reseteo básico y tipografía */
*{ box-sizing:border-box; }
html, body{ height:100%; }
body{
  margin:0;
  color:var(--ink);
  background:var(--bg);
  font-family:ui-sans-serif,system-ui,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial;
  line-height:1.55;
  display:flex;
  min-height:100vh;
  flex-direction:column;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{ color:var(--ink); margin:0 0 .35rem; line-height:1.2; }
h1{ font-size:clamp(1.6rem, 1.2rem + 1.8vw, 2.2rem); font-weight:800; }
h2{ font-size:1.25rem; font-weight:700; }
p{ margin:.3rem 0 .8rem; color:var(--ink-2); }
a{ color:var(--brand); text-decoration:none; }
a:hover{ text-decoration:underline; }

.container{ max-width:1200px; margin:0 auto; padding:0 20px; }

/* ================================
   Header fijo
   ================================ */
.site-header{
  position:sticky; top:0; z-index:50;
  background:#fff;
  border-bottom:1px solid var(--border);
  backdrop-filter:saturate(1.1) blur(4px);
}
.header-inner{
  min-height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between;
}
.brand{ display:inline-flex; align-items:center; gap:.6rem; text-decoration:none; }
.logo{ height:48px; width:auto; transition:transform var(--speed-med) ease; }
.brand:hover .logo{ transform:scale(1.02); }

.top-actions .ghost{
  display:inline-flex; align-items:center; gap:.45rem;
  text-decoration:none; font-weight:600; color:var(--brand);
  border:1px solid var(--border); padding:.55rem .9rem; border-radius:var(--radius-sm);
  transition:background var(--speed-fast), border-color var(--speed-fast), transform var(--speed-fast);
}
.top-actions .ghost:hover{
  background:#f5fbff; border-color:#d6eaf6; text-decoration:none; transform:translateY(-1px);
}

/* ================================
   Main & footer (sticky footer)
   ================================ */
#content{ flex:1 0 auto; }

.site-footer{
  margin-top:auto;
  border-top:1px solid var(--border);
  background:linear-gradient(180deg,#fff 0%, #f9fcff 100%);
}
.footer-inner{
  min-height:var(--footer-h);
  display:flex; align-items:center; justify-content:center; gap:.6rem;
  padding:10px 20px;
  color:var(--muted);
  font-size:.95rem;
}
.muted{ color:var(--muted); }
.dot{ opacity:.55; margin:0 .45rem; }

/* ================================
   Hero / portada
   ================================ */
.hero{
  padding:48px 0 28px;
  background:radial-gradient(1000px 400px at 20% -20%, #f0f8ff, transparent 60%), linear-gradient(180deg, var(--bg-soft) 0%, #ffffff 60%);
  border-bottom:1px solid var(--border);
}
.hero h1 + p{ color:var(--muted); }

/* ================================
   Tarjetas (cards)
   ================================ */
.cards-section{ padding: 22px 0 28px; }
.cards-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:18px;
}
.card{
  display:block;
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:18px 18px 16px;
  text-decoration:none; color:inherit;
  background:#fff;
  box-shadow:var(--shadow-sm);
  transition:transform var(--speed-med) cubic-bezier(.2,.8,.2,1), box-shadow var(--speed-med), border-color var(--speed-med);
}
.card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-md);
  border-color:#d6eaf6;
  text-decoration:none;
}
.card:focus-visible{
  outline:none; box-shadow:0 0 0 4px var(--ring);
}
.card-badge{
  display:inline-block;
  font-size:.8rem; font-weight:700;
  color:#2a4253; background:#eef6fb;
  border:1px solid #d6eaf6;
  padding:.22rem .5rem;
  border-radius:999px;
}

/* Colores por tipo de badge */
.card[data-badge="ventas"] .card-badge{
  background:#e8f5e9; color:#1b5e20; border-color:#a5d6a7;
}
.card[data-badge="ventas"]{ border-left:4px solid #4caf50; }

.card[data-badge="operaciones"] .card-badge{
  background:#e3f2fd; color:#0d47a1; border-color:#90caf9;
}
.card[data-badge="operaciones"]{ border-left:4px solid #2196f3; }

.card[data-badge="personalización"] .card-badge,
.card[data-badge="personalizacion"] .card-badge{
  background:#fce4ec; color:#880e4f; border-color:#f48fb1;
}
.card[data-badge="personalización"],
.card[data-badge="personalizacion"]{ border-left:4px solid #e91e63; }

.card[data-badge="logística"] .card-badge,
.card[data-badge="logistica"] .card-badge{
  background:#fff3e0; color:#e65100; border-color:#ffcc80;
}
.card[data-badge="logística"],
.card[data-badge="logistica"]{ border-left:4px solid #ff9800; }

.card[data-badge="bots"] .card-badge{
  background:#ede7f6; color:#4527a0; border-color:#b39ddb;
}
.card[data-badge="bots"]{ border-left:4px solid #673ab7; }

.card[data-badge="acceso"] .card-badge{
  background:#eceff1; color:#37474f; border-color:#b0bec5;
}
.card[data-badge="acceso"]{ border-left:4px solid #607d8b; }

/* En desarrollo (usuarios no-admin) */
.card[data-badge="en-desarrollo"] .card-badge{
  background:#fff8e1; color:#f57f17; border-color:#ffcc80;
}
.card[data-badge="en-desarrollo"]{ border-left:4px solid #ffa000; }
.card-dev{
  cursor:not-allowed;
  opacity:0.75;
}
.card-dev:hover{
  transform:none;
  box-shadow:var(--shadow-sm);
  border-color:var(--border);
}
.card-cta-dev{
  color:#f57f17;
  font-style:italic;
}

/* En desarrollo (admin - puede acceder) */
.card-dev-admin{
  position:relative;
}
.card-dev-admin::after{
  content:'';
  position:absolute;
  top:0; left:0; right:0; bottom:0;
  border:2px dashed #ffa000;
  border-radius:var(--radius-lg);
  pointer-events:none;
}
.dev-indicator{
  display:inline-block;
  margin-left:6px;
  padding:2px 6px;
  font-size:.65rem;
  font-weight:800;
  background:#ff6f00;
  color:#fff;
  border-radius:4px;
  vertical-align:middle;
}

.card-title{ margin:.45rem 0 .25rem; }
.card-desc{ color:var(--muted); margin-bottom:.4rem; }
.card-cta{ display:inline-block; margin-top:.2rem; font-weight:700; color:var(--brand); transition:transform var(--speed-fast); }
.card:hover .card-cta{ transform:translateX(3px); }

/* Wrapper para tarjetas con botón de edición */
.card-wrapper{
  position:relative;
}
.card-wrapper .card{
  display:block;
  height:100%;
}
.card-edit-btn{
  position:absolute;
  top:8px;
  right:8px;
  z-index:10;
  width:32px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  border:1px solid var(--border);
  border-radius:8px;
  text-decoration:none;
  font-size:1rem;
  opacity:0;
  transform:scale(0.9);
  transition:opacity var(--speed-fast), transform var(--speed-fast), background var(--speed-fast), border-color var(--speed-fast);
  box-shadow:var(--shadow-sm);
}
.card-wrapper:hover .card-edit-btn{
  opacity:1;
  transform:scale(1);
}
.card-edit-btn:hover{
  background:#f5fbff;
  border-color:#d6eaf6;
  transform:scale(1.1);
  text-decoration:none;
}

/* Sección "En desarrollo" separada */
.cards-section-dev{
  padding-top:0;
  margin-top:12px;
}
.section-header-dev{
  padding:16px 0 12px;
  margin-bottom:8px;
  border-top:1px solid var(--border);
}
.section-header-dev h2{
  font-size:1.1rem;
  color:var(--muted);
  font-weight:700;
  margin-bottom:4px;
}
.section-header-dev p{
  font-size:.9rem;
  color:var(--muted);
  margin:0;
}

/* ================================
   Formularios / Login
   ================================ */
.auth-wrap{
  /* Centrado perfecto contando header+footer */
  min-height:calc(100vh - var(--header-h) - var(--footer-h));
  display:grid; place-items:center;
  padding:28px 16px 34px;
  background:linear-gradient(180deg, var(--bg-soft) 0%, #ffffff 60%);
}
.auth-box{
  width:100%; max-width:420px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:26px 24px 22px;
  box-shadow:var(--shadow-sm);
}
.auth-box h1{ text-align:center; margin-bottom:.6rem; }
.auth-box p.help{ margin-top:-.2rem; margin-bottom:.9rem; color:var(--muted); font-size:.95rem; }

label{ display:block; margin:.7rem 0 .35rem; color:#2a4253; font-weight:600; }

input, select{
  width:100%;
  padding:.78rem .9rem;
  border:1px solid #d6e3ec;
  border-radius:var(--radius-sm);
  background:#fff;
  color:var(--ink);
  outline:none;
  transition:border-color var(--speed-fast), box-shadow var(--speed-fast), background var(--speed-fast);
}
input:hover{ border-color:#c9dbe6; }
input:focus{
  border-color:#9cc3da;
  box-shadow:0 0 0 4px var(--ring);
}
input[disabled]{ background:#f3f6f9; color:#8aa0b0; cursor:not-allowed; }

/* Captcha */
.captcha-wrap{ display:grid; gap:.35rem; margin-bottom:.2rem; }
.captcha-question{ color:var(--muted); font-size:.95rem; }

/* Errores y avisos */
.error{
  margin:.2rem 0 .8rem;
  padding:.6rem .8rem;
  border:1px solid #ffd2d2;
  background:#fff5f5;
  color:#9a1d1d;
  border-radius:var(--radius-sm);
}

/* Botones */
.btn-primary{
  margin-top:16px;
  width:100%;
  padding:.9rem 1rem;
  border:0;
  border-radius:var(--radius-md);
  background:linear-gradient(180deg, var(--accent) 0%, #ffc933 100%);
  color:#1a1a1a;
  font-weight:800; letter-spacing:.2px;
  cursor:pointer;
  box-shadow:0 6px 14px rgba(255,189,0,.25);
  transition:transform var(--speed-fast), box-shadow var(--speed-fast), filter var(--speed-fast);
}
.btn-primary:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(255,189,0,.35);
  filter:saturate(1.05);
}
.btn-primary:active{
  transform:translateY(0);
  box-shadow:0 4px 10px rgba(255,189,0,.28);
}
.btn-primary:focus-visible{ outline:none; box-shadow:0 0 0 4px rgba(255,189,0,.4); }

/* Secundario (enlaces fantasma en header ya existen) */
.btn-ghost{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.65rem .9rem; border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background:#fff; color:var(--brand); font-weight:700;
  transition:background var(--speed-fast), border-color var(--speed-fast), transform var(--speed-fast);
}
.btn-ghost:hover{ background:#f5fbff; border-color:#d6eaf6; transform:translateY(-1px); }

/* ================================
   Estados de accesibilidad
   ================================ */
:focus-visible{ outline: none; box-shadow:0 0 0 4px var(--ring); }
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
}

/* ================================
   Utilidades
   ================================ */
.hidden{ display:none !important; }
.center{ text-align:center; }
.max-w-sm{ max-width:420px; }
.mt-0{ margin-top:0 !important; }

/* ================================
   Ajustes específicos plantillas
   ================================ */
.cards-section .muted{ display:block; text-align:center; margin:12px 0 8px; }

/* Opcional: “sombra” sutil al hacer scroll en header (sin JS) */
@supports (animation-timeline: scroll()){
  .site-header{ position:sticky; animation: headshadow linear both; animation-timeline: scroll(root); animation-range: 0 120px; }
  @keyframes headshadow{
    from{ box-shadow: none; }
    to{ box-shadow: 0 6px 14px rgba(0,0,0,.06); }
  }
}