/* ============================================================
   Login "Corporativo" -- familia de diseños (corp_azul, corp_espejo, corp_claro, corp_grafito, corp_ilustrado)
   Panel de marca con formas diagonales + 4 características (o una ilustración), y una tarjeta de acceso al otro lado.
   Todos comparten la misma plantilla (app/Views/auth/login.php).

   LOS COLORES NO SON PROPIOS DEL LOGIN: salen de la paleta de la plataforma (Personalización Visual > Temas
   preestablecidos / Colores): --color-sidebar (fondo oscuro), --color-primario (botones y acentos) y
   --color-secundario (detalles). Así el login, el sistema web y el app hablan siempre el mismo idioma de color.
   ============================================================ */

.corp{
  --c1:var(--color-sidebar); --c2:color-mix(in srgb, var(--color-primario) 55%, var(--color-sidebar));
  --forma:var(--color-primario); --acc:var(--color-secundario);
  --btn:var(--color-primario); --btn-hover:color-mix(in srgb, var(--color-primario) 82%, #000);
  --hero-txt:#ffffff; --hero-sub:rgba(255,255,255,.78);
  --feat-bg:rgba(255,255,255,.10); --feat-txt:#ffffff; --feat-sub:rgba(255,255,255,.74);
  --panel-bg:color-mix(in srgb, var(--color-primario) 5%, #f7f9fc);
  --card-bg:#ffffff; --card-txt:#1b2333; --card-mut:#6b7488; --card-sombra:0 24px 60px rgba(15,27,61,.16);
  --campo-bg:#ffffff; --campo-bor:#d7dde9; --campo-txt:#1b2333;
  --pie-bg:color-mix(in srgb, var(--color-sidebar) 90%, #000); --pie-txt:rgba(255,255,255,.82);

  position:relative; min-height:100vh; display:flex; flex-direction:column;
  background:var(--panel-bg); color:var(--card-txt); overflow:hidden;
  font-family:var(--fuente-principal, 'Inter'), sans-serif;
}

/* ---------- Variantes (solo cambian la disposición o el claro/oscuro; nunca el color de la marca) ---------- */
/* Oscuro: fondo y tarjeta oscuros derivados del color de menú */
.corp-t-grafito{
  --c1:color-mix(in srgb, var(--color-sidebar) 55%, #000); --c2:var(--color-sidebar);
  --forma:color-mix(in srgb, var(--color-primario) 40%, var(--color-sidebar));
  --panel-bg:color-mix(in srgb, var(--color-sidebar) 72%, #000);
  --card-bg:color-mix(in srgb, var(--color-sidebar) 94%, #ffffff); --card-txt:#eef2ff; --card-mut:#98a4c0; --card-sombra:0 24px 60px rgba(0,0,0,.55);
  --campo-bg:color-mix(in srgb, var(--color-sidebar) 70%, #000); --campo-bor:color-mix(in srgb, var(--color-sidebar) 82%, #ffffff); --campo-txt:#eef2ff;
  --pie-bg:color-mix(in srgb, var(--color-sidebar) 55%, #000);
}
/* Claro: panel de marca en tonos suaves del color primario, con texto oscuro */
.corp-t-claro{
  --c1:color-mix(in srgb, var(--color-primario) 14%, #ffffff); --c2:color-mix(in srgb, var(--color-primario) 30%, #ffffff);
  --forma:color-mix(in srgb, var(--color-primario) 45%, #ffffff); --acc:var(--color-primario);
  --hero-txt:#1b2333; --hero-sub:#475467;
  --feat-bg:rgba(255,255,255,.75); --feat-txt:#1b2333; --feat-sub:#586479;
  --panel-bg:#ffffff; --pie-bg:color-mix(in srgb, var(--color-primario) 12%, #ffffff); --pie-txt:#475467;
}
/* Invertido (tarjeta a la izquierda) e ilustrado: la paleta es la de siempre, cambia la composición (ver más abajo) */
.corp-t-espejo, .corp-t-azul, .corp-t-ilustrado{ }


/* ---------- Fondo: formas diagonales ---------- */
.corp-fondo{ position:absolute; inset:0; pointer-events:none; z-index:0; }
.corp-forma{ position:absolute; inset:0; }
.corp-forma-1{
  background:linear-gradient(135deg, var(--c1), var(--c2));
  clip-path:polygon(0 0, 62% 0, 38% 100%, 0 100%);
}
.corp-forma-2{ /* faja translucida, da profundidad */
  background:var(--forma); opacity:.32;
  clip-path:polygon(0 0, 24% 0, 6% 100%, 0 100%);
}
.corp-forma-3{ /* filo de color a lo largo del borde diagonal */
  background:var(--acc); opacity:.75;
  clip-path:polygon(62% 0, 62.22% 0, 38.22% 100%, 38% 100%);
}
.corp-puntos{
  position:absolute; left:30%; top:7%; width:250px; height:170px; opacity:.55;
  background:radial-gradient(circle, rgba(255,255,255,.55) 1.6px, transparent 1.8px) 0 0 / 26px 26px;
}

/* ---------- Estructura ---------- */
.corp-main{ position:relative; z-index:1; flex:1; display:flex; }
.corp-hero{
  flex:0 0 58%; display:flex; align-items:center;
  padding:48px 5vw 48px 6vw; color:var(--hero-txt);
}
.corp-hero-inner{ width:min(38vw, 680px); min-width:440px; }
.corp-panel{ flex:1; display:flex; align-items:center; justify-content:center; padding:32px 28px; }

/* ---------- Marca ---------- */
.corp-marca{ display:flex; align-items:center; gap:14px; margin-bottom:26px; }
.corp-icono{
  width:58px; height:58px; border-radius:16px; display:inline-flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28); font-size:1.7rem; color:var(--hero-txt);
}
.corp-t-claro .corp-icono{ background:rgba(255,255,255,.75); border-color:color-mix(in srgb, var(--acc) 30%, transparent); color:var(--acc); }
.corp-nombre{ font-size:2.6rem; font-weight:800; letter-spacing:-.02em; line-height:1; color:var(--hero-txt); }
.corp-logo{ max-height:64px; max-width:280px; object-fit:contain; background:#fff; padding:8px 14px; border-radius:14px; }

.corp-titulo{ font-size:2rem; font-weight:700; line-height:1.25; margin:0 0 16px; color:var(--hero-txt); }
.corp-texto{ font-size:1rem; line-height:1.65; margin:0; color:var(--hero-sub); max-width:560px; }

/* ---------- Las 4 caracteristicas ---------- */
.corp-features{
  margin-top:38px; display:grid; grid-template-columns:repeat(4, 1fr); gap:6px;
  padding:22px 12px; border-radius:18px; background:var(--feat-bg);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.corp-feature{ text-align:center; padding:0 8px; color:var(--feat-txt); }
.corp-feature i{ display:block; font-size:1.45rem; margin-bottom:8px; color:var(--acc); }
.corp-feature b{ display:block; font-size:.92rem; font-weight:700; margin-bottom:5px; }
.corp-feature span{ display:block; font-size:.72rem; line-height:1.4; color:var(--feat-sub); }

/* ---------- Tarjeta de acceso ---------- */
.corp-card{
  width:100%; max-width:470px; background:var(--card-bg); color:var(--card-txt);
  border-radius:28px; padding:46px 42px 40px; box-shadow:var(--card-sombra);
}
.corp-card-titulo{ font-size:1.55rem; font-weight:700; text-align:center; margin:0 0 6px; color:var(--card-txt); }
.corp-card-sub{ text-align:center; margin:0 0 28px; font-size:.9rem; color:var(--card-mut); }

.corp-label{
  display:block; margin:0 0 7px; font-size:.72rem; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--card-mut);
}
.corp-campo{
  display:flex; align-items:center; gap:10px; height:54px; padding:0 14px; margin-bottom:20px;
  background:var(--campo-bg); border:1px solid var(--campo-bor); border-radius:14px;
  transition:border-color .15s, box-shadow .15s;
}
.corp-campo:focus-within{ border-color:var(--btn); box-shadow:0 0 0 4px color-mix(in srgb, var(--btn) 18%, transparent); }
.corp-campo > i{ color:var(--card-mut); font-size:1rem; }
.corp-campo input{
  flex:1; min-width:0; height:100%; border:0; outline:0; background:transparent;
  font:inherit; font-size:.95rem; color:var(--campo-txt);
}
.corp-campo input::placeholder{ color:var(--card-mut); opacity:.7; }
.corp-ojo{ border:0; background:transparent; color:var(--card-mut); padding:6px; cursor:pointer; line-height:1; }
.corp-ojo:hover{ color:var(--card-txt); }

.corp-boton{
  width:100%; height:54px; margin-top:22px; border:0; border-radius:14px; cursor:pointer;
  background:var(--btn); color:#fff; font:inherit; font-size:1rem; font-weight:700;
  box-shadow:0 10px 24px color-mix(in srgb, var(--btn) 35%, transparent);
  transition:background .15s, transform .05s;
}
.corp-boton:hover{ background:var(--btn-hover); }
.corp-boton:active{ transform:translateY(1px); }

/* ---------- Pie ---------- */
.corp-pie{
  position:relative; z-index:2; display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:14px 28px; background:var(--pie-bg); color:var(--pie-txt); font-size:.8rem;
}
.corp-pie i{ margin-right:4px; }

/* ---------- Variante invertida (tarjeta a la izquierda, marca a la derecha) ---------- */
.corp-t-espejo .corp-main{ flex-direction:row-reverse; }
.corp-t-espejo .corp-forma-1{ clip-path:polygon(100% 0, 38% 0, 62% 100%, 100% 100%); }
.corp-t-espejo .corp-forma-2{ clip-path:polygon(100% 0, 76% 0, 94% 100%, 100% 100%); }
.corp-t-espejo .corp-forma-3{ clip-path:polygon(38% 0, 37.78% 0, 61.78% 100%, 62% 100%); }
.corp-t-espejo .corp-puntos{ left:auto; right:30%; }
.corp-t-espejo .corp-hero{ padding:48px 6vw 48px 5vw; justify-content:flex-end; }

/* ---------- Pantallas medianas y celulares: se apila ---------- */
@media (max-width: 992px){
  .corp-forma-1{ inset:0 0 auto 0; height:330px; clip-path:none; }
  .corp-t-espejo .corp-forma-1{ clip-path:none; }
  .corp-forma-2, .corp-forma-3, .corp-puntos{ display:none; }
  .corp-main, .corp-t-espejo .corp-main{ flex-direction:column; }
  .corp-hero, .corp-t-espejo .corp-hero{ flex:none; padding:34px 24px 64px; justify-content:flex-start; }
  .corp-hero-inner{ width:100%; min-width:0; }
  .corp-marca{ margin-bottom:14px; }
  .corp-nombre{ font-size:1.8rem; }
  .corp-icono{ width:46px; height:46px; font-size:1.3rem; }
  .corp-titulo{ font-size:1.05rem; font-weight:600; margin:0; }
  .corp-texto, .corp-features{ display:none; }
  .corp-panel{ padding:0 16px 28px; align-items:flex-start; }
  .corp-card{ margin-top:-30px; padding:32px 24px 28px; border-radius:22px; }
  .corp-pie{ flex-direction:column; text-align:center; gap:4px; padding:12px 16px; }
}
@media (min-width: 993px) and (max-width: 1240px){
  .corp-hero-inner{ min-width:400px; }
  .corp-feature span{ font-size:.68rem; }
  .corp-titulo{ font-size:1.7rem; }
}

/* ---------- Variante "ilustrado": en vez de las 4 características, la ilustracion de tablero (assets/css/ilustracion.css) ---------- */
.corp-ilustracion{ margin-top:24px; }
.corp-ilustracion svg{ width:100%; max-width:580px; height:auto; display:block; }
.corp .hs-ola{ fill:rgba(255,255,255,.08); }
.corp-t-claro .hs-ola{ fill:rgba(255,255,255,.55); }
@media (max-width: 992px){ .corp-ilustracion{ display:none; } }