/* ============================================================================
   LicenControl · Capa de overrides sobre el tema (primefaces-auladir) y el layout
   ----------------------------------------------------------------------------
   Portada de esta hoja: el tema de componentes (primefaces-auladir/theme.css) y el
   layout (auladir-layout/css/layout-light.css + demo-light.css) se han traído tal
   cual del proyecto `portal` y recoloreados al azul corporativo de Auladir
   (#04809A, el del logotipo).
   Aquí se añade SOLO lo que esas hojas no cubren:
     · Los tokens de la paleta, disponibles en toda la aplicación.
     · El CTA de conversión en oro (#D97706), reservado a los clics clave.
     · Los acentos azules residuales del layout reconducidos a la marca.
     · La marca LicenControl en la barra lateral (icono, sin imagen).
   Se carga después del tema, en las dos plantillas (privada y de acceso).
   ============================================================================ */
:root{
  /* Primary */
  --auladir-green:#04809A;
  --auladir-green-dark:#036276;
  /* CTA / conversión */
  --auladir-cta:#D97706;
  --auladir-cta-dark:#B45309;
  /* Estados (feedback del sistema) */
  --auladir-success:#22C55E;
  --auladir-error:#EF4444;
  --auladir-info:#3B82F6;
}

/* --- CTA de conversión en oro ----------------------------------------------
   Regla de oro UX: el botón de conversión NO debe ser del verde de la marca,
   para que no se camufle. Va en oro y es el único uso de este color (60-30-10). */
.login-body .login-form .ui-button,
.login-body .login-form button[type="submit"]{
  background:var(--auladir-cta) !important;
  border:1px solid var(--auladir-cta) !important;
  color:#ffffff !important;
}
.login-body .login-form .ui-button:enabled:hover,
.login-body .login-form .ui-button:not(:disabled):hover,
.login-body .login-form button[type="submit"]:hover{
  background:var(--auladir-cta-dark) !important;
  border-color:var(--auladir-cta-dark) !important;
}

/* Clase utilitaria: marca cualquier botón/enlace como CTA de conversión. */
.lc-cta.ui-button,
a.lc-cta,
button.lc-cta{
  background:var(--auladir-cta) !important;
  border-color:var(--auladir-cta) !important;
  color:#ffffff !important;
}
.lc-cta.ui-button:enabled:hover,
a.lc-cta:hover,
button.lc-cta:hover{
  background:var(--auladir-cta-dark) !important;
  border-color:var(--auladir-cta-dark) !important;
}

/* --- Enlaces de marca en verde ---------------------------------------------
   layout-light.css trae selectores muy específicos (.login-form>p>a, etc.) y
   PrimeFaces inyecta el tema en orden no garantizado: usamos !important para
   asegurar que el color de marca gana. */
.login-body a{ color:var(--auladir-green) !important; }
.login-body a:hover{ color:var(--auladir-green-dark) !important; }

/* --- Página de acceso ------------------------------------------------------
   El layout base reserva el 70% de la pantalla a .login-image con una foto que
   esta aplicación no empaqueta. La sustituimos por un degradado corporativo y
   damos al panel un ancho más equilibrado. */
.login-body .login-wrapper .login-panel{ width:38%; }
.login-body .login-wrapper .login-image{
  width:62%;
  background:var(--auladir-green) !important;
  background-image:linear-gradient(135deg, var(--auladir-green) 0%, var(--auladir-green-dark) 100%) !important;
  justify-content:center !important;
}
@media screen and (max-width:992px){
  .login-body .login-wrapper .login-panel{ width:100%; }
}
/* Logotipo de Auladir en la cabecera del panel de acceso. El SVG es azul
   corporativo sobre transparente y el panel es blanco: se pinta tal cual. */
.lc-login-logo{
  display:block;
  width:220px;
  max-width:70%;
  height:auto;
  margin:0 auto 1.25rem auto;
}
.lc-brand-subtitle{
  text-align:center;
  color:#6c757d;
  font-weight:600;
  margin:.25rem 0 2rem 0;
}

/* --- Admin shell: acentos de marca en verde --------------------------------
   El tema de componentes ya es verde; aquí solo se reconducen los acentos
   azules residuales del layout (enlaces de contenido, badge del topbar y botón
   del configurador). */
.layout-content-wrapper a:not(.ui-button):not([class*="overview"]){ color:var(--auladir-green); }
.layout-config-button{ background:var(--auladir-green) !important; }
.layout-topbar .topbar-menu>li>a .topbar-badge{ background:var(--auladir-green) !important; }

/* --- Marca LicenControl en la barra lateral --------------------------------
   En layout-slim la sidebar mide 6rem. La regla base aplica padding:1rem y
   margin:1rem a cada lado en .logo, dejando solo 2rem para el contenido.
   Anulamos esos valores y pintamos el isotipo de Auladir sobre un círculo
   blanco translúcido, que le da contraste contra el azul de la barra. */
.layout-sidebar .logo{
  padding:0.35rem !important;
  margin:0 !important;
  display:block;
  text-align:center;
  color:#fff;
  text-decoration:none;
}
.layout-sidebar .logo .lc-sidebar-mark{
  display:flex;
  align-items:center;
  justify-content:center;
  width:2.75rem;
  height:2.75rem;
  margin:0 auto;
  border-radius:50%;
  background:hsla(0,0%,100%,.18);
}
.layout-sidebar .logo .lc-sidebar-mark img{
  width:1.75rem;
  height:1.75rem;
  display:block;
}
.layout-sidebar .logo .lc-sidebar-name{
  display:block;
  margin-top:.35rem;
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.02em;
  color:#fff;
}

/* --- Barra lateral (menú) en verde corporativo -----------------------------
   El layout base pinta la sidebar en gris oscuro (.layout-sidebar-darkgray,
   #343a40). La reconducimos al verde, conservando los overlays blancos
   translúcidos de hover/activo (que ya funcionan sobre fondo oscuro). */
.layout-sidebar-darkgray .layout-sidebar{
  background:var(--auladir-green) !important;
  background-image:linear-gradient(180deg, var(--auladir-green) 10%, var(--auladir-green-dark) 100%) !important;
}
.layout-sidebar-darkgray .layout-sidebar .layout-menu li a:hover{
  background:var(--auladir-green-dark) !important;
}
.layout-sidebar-darkgray .layout-sidebar .layout-menu .layout-root-menuitem.active-menuitem,
.layout-sidebar-darkgray .layout-sidebar .layout-menu .layout-root-menuitem>ul>li.active-menuitem{
  background:var(--auladir-green-dark) !important;
}
/* Flyout del submenú en modo slim */
.layout-sidebar-darkgray.layout-slim .layout-sidebar .layout-menu .layout-root-menuitem>ul{
  background:var(--auladir-green) !important;
  background-image:linear-gradient(180deg, var(--auladir-green) 10%, var(--auladir-green-dark) 100%) !important;
}

/* --- Menú lateral en móvil: enlaces invisibles -----------------------------
   layout-light.css oculta el <a> de cada item raíz por defecto y solo lo vuelve
   a mostrar en modo "slim" a partir de 992px:
     .layout-menu .layout-root-menuitem>a{display:none}
     @media (min-width:992px) .layout-wrapper.layout-slim ... >a{display:block;...}
   Esta app fija layout-slim de forma permanente (template.xhtml), sin alternar a
   otro modo en móvil, así que por debajo de 992px ningún enlace se mostraba: el
   cajón del menú se abría vacío. Reproducimos aquí el mismo "unhide", pero en
   fila (icono + texto), más apropiado para el cajón móvil a ancho completo. */
@media screen and (max-width: 991px){
  .layout-wrapper.layout-slim .layout-menu .layout-root-menuitem>a{
    display:flex;
    align-items:center;
    padding:.75rem 1rem;
    cursor:pointer;
    outline:none;
    transition:background-color .2s;
  }
  .layout-wrapper.layout-slim .layout-menu .layout-root-menuitem>a .layout-menuitem-icon{
    margin-right:.75rem;
    font-size:1.25rem;
  }
}

/* --- Cabecera (topbar) en verde corporativo --------------------------------
   El layout base pinta la topbar en blanco (#fff) con texto/iconos grises. La
   reconducimos al verde oscuro y ponemos texto e iconos en blanco para mantener
   el contraste. */
.layout-topbar{
  background:var(--auladir-green-dark) !important;
  border-bottom:1px solid var(--auladir-green-dark) !important;
  color:#fff !important;
}
.layout-topbar .viewname,
.layout-topbar .menu-button,
.layout-topbar .menu-button i,
.layout-topbar .topbar-menu>li>a,
.layout-topbar .topbar-menu>li>a i,
.layout-topbar .topbar-menu>li.profile-item>a{
  color:#fff !important;
}
.layout-topbar .menu-button,
.layout-topbar .topbar-menu>li.right-sidebar-item>a{
  background:hsla(0,0%,100%,.12) !important;
}
.layout-topbar .menu-button:hover,
.layout-topbar .topbar-menu>li>a:hover{
  background:hsla(0,0%,100%,.22) !important;
}
.layout-topbar .topbar-separator,
.layout-topbar .topbar-menu>li.profile-item{
  border-color:hsla(0,0%,100%,.3) !important;
}
/* El badge sobre la topbar verde: mantenerlo legible (oro CTA) */
.layout-topbar .topbar-menu>li>a .topbar-badge{
  background:var(--auladir-cta) !important;
}
/* El menú de perfil es un h:form: no debe romper la fila de la topbar. */
.layout-topbar .topbar-menu .logout-form{ display:block; }
.layout-topbar .topbar-menu .logout-form a{
  display:flex;
  align-items:center;
  color:#495057 !important;
}

/* Avatar de iniciales en la topbar: contraste sobre la barra verde. Igualamos
   el tamaño 2.5rem que el layout asignaba a .profile-image. */
.layout-topbar .lc-avatar.ui-avatar{
  width:2.5rem;
  height:2.5rem;
  margin-right:.5rem;
  background:var(--auladir-cta);
  color:#fff;
  font-weight:700;
  font-size:.95rem;
}

/* --- Cabecera de las tablas (DataTable) ------------------------------------
   El tema pinta la cabecera (thead th) en #f8f9fa, el MISMO tono que usan las
   filas alternas de stripedRows, así que la cabecera apenas se distingue. La
   teñimos con un azul muy tenue y reforzamos el borde inferior en azul para
   separarla del cuerpo y dar acento de marca. */
.ui-datatable thead th{
  background:#e3eef2 !important;
  border-bottom:2px solid var(--auladir-green) !important;
}

/* --- Cabecera de los p:panel de consulta/edición ---------------------------
   Sustituye al color en línea (#2193b0) que traían las páginas: barra verde
   corporativa con el título en blanco. */
.lc-panel-header{
  display:flex;
  align-items:center;
  gap:.75rem;
  color:#fff;
  font-weight:700;
  font-size:1.15rem;
}
.lc-panel.ui-panel .ui-panel-titlebar{
  background:var(--auladir-green) !important;
  border-color:var(--auladir-green) !important;
  color:#fff !important;
  border-radius:4px 4px 0 0;
}
.lc-panel.ui-panel{
  border:0 none;
  margin-bottom:0;
  border-radius:4px;
  overflow:hidden;
  box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);
}
.lc-panel.ui-panel .ui-panel-content{
  border:0 none !important;
  padding:1.25rem;
}

/* --- Barras de acciones (p:toolbar) ----------------------------------------
   El tema pinta .ui-toolbar como una caja gris (fondo #f8f9fa, borde #dee2e6 y
   1rem de padding). En esta aplicación el toolbar no estructura nada: solo
   agrupa uno o dos botones de acción (Buscar, Grabar, Cancelar...), así que la
   caja añade ruido visual. La dejamos transparente y sin borde, conservando el
   comportamiento de disposición (flex) que sí aporta el componente. */
body .ui-toolbar{
  background:transparent !important;
  border:0 none !important;
  padding:0 !important;
}

/* --- Growl: color por resultado --------------------------------------------
   El tema pinta el growl INFO en azul. En esta aplicación INFO significa
   "operación con éxito", así que se reconduce al verde de marca. ERROR ya es
   rojo (fallo) y WARN se deja en ámbar. Con esto, reactivar un cliente (INFO)
   sale en verde y suspenderlo (emitido como ERROR) sale en rojo. */
body .ui-growl .ui-growl-item-container.ui-growl-info{
  background:#dcfce7 !important;
  border-color:var(--auladir-success) !important;
  color:#14532d !important;
}
body .ui-growl .ui-growl-item-container.ui-growl-info .ui-growl-image,
body .ui-growl .ui-growl-item-container.ui-growl-info .ui-icon{
  color:var(--auladir-success) !important;
}

/* --- Tag de estado: éxito en verde real ------------------------------------
   El tema recoloreó ui-tag-success al azul de marca (#036b80), así que
   severity="success" salía azul-teal, no verde. Para el feedback de estado
   (Activo, Reanudada, plan activo, usuario habilitado) se quiere el verde de
   éxito de la paleta, coherente con el growl. danger/warning se dejan como están. */
body .ui-tag.ui-tag-success{
  background:var(--auladir-success) !important;
  color:#fff !important;
}

/* --- Utilidades de color de estado para mensajes de formulario ------------- */
.lc-text-success{ color:var(--auladir-success) !important; }
.lc-text-error{ color:var(--auladir-error) !important; }
.lc-text-info{ color:var(--auladir-info) !important; }

/* --- Formulario de acceso ---------------------------------------------------
   layout-light.css dimensiona los hijos DIRECTOS de .login-form
   (".login-form > input" / "> button" al 85%, max 310px). Aquí el formulario es
   un <h:form>, así que los campos no son hijos directos: trasladamos la medida
   al propio <form> y dejamos que los campos ocupen su ancho. */
.login-body .login-wrapper .login-panel .login-form form{
  width:85vw;
  max-width:310px;
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.login-body .login-wrapper .login-panel .login-form form .ui-inputfield,
.login-body .login-wrapper .login-panel .login-form form .ui-password,
.login-body .login-wrapper .login-panel .login-form form .ui-button{
  width:100%;
}
.login-body .login-wrapper .login-panel .login-form h1{
  font-size:1.5rem;
  margin:0 0 .25rem 0;
}
.login-body .login-wrapper .login-panel .copyright{
  font-size:.85rem;
  color:#6c757d;
}