/* ══════════════════════════════════════════════════════════════
   LOGIN LICITIA PH: "Ladrillos, Mampostería & Obras Civiles"
   Arquitectura 100% Luminosa (Sin temas oscuros / Cero Negro)
   Solo aplica con html.login-ph — el login de LicitIA SECOP no se toca.
   ══════════════════════════════════════════════════════════════ */

/* Tokens Base para PH Login (Tema 1: Blanco Puro por defecto) */
html.login-ph,
html.login-ph body {
  --bg-body: #ffffff;
  --bg-surface: #ffffff;
  --bg-elevated: #f8fafc;
  --border: #e2e8f0;
  --border-active: #c2410c;

  --text-primary: #0f172a;
  --text-secondary: #334155;
  --text-muted: #64748b;
  --text-main: #0f172a;
  --text-link: #c2410c;

  --primary: #c2410c;              /* Terracota toscano */
  --primary-hover: #9a3412;        /* Ladrillo quemado */
  --primary-soft: rgba(194, 65, 12, 0.10);

  color: var(--text-primary);
}

/* Fondo para Blanco Puro Arquitectónico */
html.login-ph body {
  background:
    radial-gradient(1000px 520px at 8% -8%, rgba(194, 65, 12, 0.08), transparent 52%),
    radial-gradient(800px 400px at 110% 10%, rgba(217, 119, 6, 0.06), transparent 46%),
    #ffffff;
  color: var(--text-primary);
}

/* ── TEMA 2: Piedra Caliza & Travertino (Cantera Cálida & Mármol Romano) ── */
html.login-ph.ph-theme-caliza,
html.login-ph.ph-theme-caliza body,
html.login-ph.ph-theme-hormigon,
html.login-ph.ph-theme-hormigon body {
  --bg-body: #f4efe6;              /* Arena de cantera / Piedra caliza natural cálida */
  --bg-surface: #fbf8f2;           /* Mármol travertino cálido pulido para tarjeta de login */
  --bg-elevated: #eee6d8;          /* Piedra caliza intermedia para juntas, inputs y botones */
  --border: #ded3c1;               /* Juntas de cantera suaves y definidas */
  --border-active: #c2410c;

  --text-primary: #1c1917;         /* Pizarra oscura cálida de alto contraste */
  --text-secondary: #44403c;
  --text-muted: #78716c;           /* Piedra cálida para etiquetas y metadatos */
  --text-main: #1c1917;
  --text-link: #c2410c;

  --primary: #c2410c;              /* Terracota toscano vivo */
  --primary-hover: #9a3412;
  --primary-soft: rgba(194, 65, 12, 0.12);
}

html.login-ph.ph-theme-caliza body,
html.login-ph.ph-theme-hormigon body {
  background:
    radial-gradient(900px 480px at 10% -5%, rgba(194, 65, 12, 0.08), transparent 55%),
    radial-gradient(800px 400px at 110% 10%, rgba(217, 119, 6, 0.07), transparent 46%),
    #f4efe6 !important;
}

/* Boot Overlay PH: Arquitectura luminosa, cero negro y colores oficiales PH */
html.login-ph #bootOverlay {
  background: #ffffff !important;
}
html.login-ph.ph-theme-caliza #bootOverlay,
html.login-ph.ph-theme-hormigon #bootOverlay {
  background: #f4efe6 !important;
}

html.login-ph #bootOverlayTitle,
html.login-ph #bootOverlay p[style*="color:#60a5fa"],
html.login-ph #bootOverlay p:first-of-type {
  color: var(--primary, #c2410c) !important;
}
html.login-ph.ph-theme-caliza #bootOverlayTitle,
html.login-ph.ph-theme-caliza #bootOverlay p[style*="color:#60a5fa"],
html.login-ph.ph-theme-caliza #bootOverlay p:first-of-type,
html.login-ph.ph-theme-hormigon #bootOverlayTitle,
html.login-ph.ph-theme-hormigon #bootOverlay p[style*="color:#60a5fa"],
html.login-ph.ph-theme-hormigon #bootOverlay p:first-of-type {
  color: var(--primary, #c2410c) !important;
}
html.login-ph.ph-accent-terracota #bootOverlayTitle { color: #c2410c !important; }
html.login-ph.ph-accent-ferrico #bootOverlayTitle { color: #b91c1c !important; }
html.login-ph.ph-accent-ambar #bootOverlayTitle { color: #d97706 !important; }

html.login-ph .licitia-boot-spinner {
  border: 3px solid var(--primary-soft, rgba(194, 65, 12, 0.18)) !important;
  border-top-color: var(--primary, #c2410c) !important;
}
html.login-ph.ph-theme-caliza .licitia-boot-spinner,
html.login-ph.ph-theme-hormigon .licitia-boot-spinner {
  border: 3px solid var(--primary-soft, rgba(194, 65, 12, 0.20)) !important;
  border-top-color: var(--primary, #c2410c) !important;
}
html.login-ph.ph-accent-terracota .licitia-boot-spinner {
  border-color: rgba(194, 65, 12, 0.18) !important;
  border-top-color: #c2410c !important;
}
html.login-ph.ph-accent-ferrico .licitia-boot-spinner {
  border-color: rgba(185, 28, 28, 0.20) !important;
  border-top-color: #b91c1c !important;
}
html.login-ph.ph-accent-ambar .licitia-boot-spinner {
  border-color: rgba(217, 119, 6, 0.20) !important;
  border-top-color: #d97706 !important;
}

html.login-ph #bootOverlayMsg {
  color: var(--text-muted, #64748b) !important;
}
html.login-ph.ph-theme-caliza #bootOverlayMsg,
html.login-ph.ph-theme-hormigon #bootOverlayMsg {
  color: #78716c !important;
}

html.login-ph .licitia-boot-retry {
  border-color: var(--primary, #c2410c) !important;
  background: var(--primary-soft, rgba(194, 65, 12, 0.10)) !important;
  color: var(--primary, #c2410c) !important;
}
html.login-ph.ph-theme-caliza .licitia-boot-retry,
html.login-ph.ph-theme-hormigon .licitia-boot-retry {
  border-color: var(--primary, #c2410c) !important;
  background: var(--primary-soft, rgba(194, 65, 12, 0.12)) !important;
  color: var(--primary, #c2410c) !important;
}

/* Desactivar selector de rol de SECOP en login PH */
html.login-ph #roleSelectorContainer {
  display: none !important;
}

/* Dos caminos de PH: administrador y proveedor */
html.login-ph #phCaminoContainer .ph-camino-pregunta {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted, #78716c);
  margin: 0 0 8px;
}
html.login-ph #phCaminoContainer .ph-caminos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
html.login-ph #phCaminoContainer .ph-camino-label {
  display: block;
  cursor: pointer;
  margin: 0;
}
html.login-ph #phCaminoContainer .ph-camino-label input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
html.login-ph #phCaminoContainer .ph-camino {
  display: block;
  border: 1px solid var(--border, #e7e5e4);
  border-radius: 12px;
  background: var(--bg-surface, #fff);
  padding: 12px 8px;
  text-align: center;
}
html.login-ph #phCaminoContainer .ph-camino i {
  display: block;
  color: var(--primary, #c2410c);
  font-size: 18px;
  margin-bottom: 4px;
}
html.login-ph #phCaminoContainer .ph-camino strong {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-main, #1c1917);
  line-height: 1.3;
}
html.login-ph #phCaminoContainer .ph-camino span {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  color: var(--text-muted, #78716c);
}
html.login-ph #phCaminoContainer input:checked + .ph-camino {
  border-color: var(--primary, #c2410c);
  background: rgba(194, 65, 12, 0.08);
}
html.login-ph #phCaminoContainer input:focus-visible + .ph-camino {
  outline: 2px solid var(--primary, #c2410c);
  outline-offset: 2px;
}

/* Botón Regresar (Inicio) */
html.login-ph #loginBack {
  background: var(--primary) !important;
  border-color: var(--primary-hover) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(194, 65, 12, 0.25) !important;
  font-weight: 700 !important;
}
html.login-ph #loginBack:hover {
  background: var(--primary-hover) !important;
  box-shadow: 0 6px 20px rgba(194, 65, 12, 0.38) !important;
  color: #ffffff !important;
}

/* Tarjeta Principal de Login */
html.login-ph .glass {
  background: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border) !important;
  box-shadow: 0 20px 50px -10px rgba(194, 65, 12, 0.08), 0 8px 24px -4px rgba(15, 23, 42, 0.06) !important;
  border-radius: 20px !important;
}
html.login-ph.ph-theme-caliza .glass,
html.login-ph.ph-theme-hormigon .glass,
html.login-ph.ph-theme-caliza #loginCard,
html.login-ph.ph-theme-hormigon #loginCard {
  background: #fbf8f2 !important;
  border: 1px solid #ded3c1 !important;
  box-shadow: 0 20px 50px -10px rgba(28, 25, 23, 0.16), 0 8px 24px -4px rgba(28, 25, 23, 0.08) !important;
}

/* Botón Principal (Entrar al Portal PH) */
html.login-ph .btn-primary {
  background: linear-gradient(135deg, var(--primary), #ea580c) !important;
  border: none !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 16px rgba(194, 65, 12, 0.3) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
html.login-ph .btn-primary:hover {
  filter: brightness(1.06);
  box-shadow: 0 6px 22px rgba(194, 65, 12, 0.42) !important;
  transform: translateY(-1px);
}
html.login-ph .btn-primary:active {
  transform: translateY(0);
}

/* Inputs de texto y contraseña */
html.login-ph input {
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
}
html.login-ph input:focus {
  border-color: var(--border-active) !important;
  box-shadow: 0 0 0 3px rgba(194, 65, 12, 0.15) !important;
  outline: none !important;
}

html.login-ph.ph-theme-caliza input,
html.login-ph.ph-theme-hormigon input {
  background: #eee6d8 !important;
  border: 1px solid #ded3c1 !important;
  color: #1c1917 !important;
}
html.login-ph.ph-theme-caliza input:focus,
html.login-ph.ph-theme-hormigon input:focus {
  background: #fbf8f2 !important;
  border-color: #c2410c !important;
  box-shadow: 0 0 0 3px rgba(194, 65, 12, 0.15) !important;
}
html.login-ph.ph-theme-caliza input::placeholder,
html.login-ph.ph-theme-hormigon input::placeholder {
  color: #a8a29e !important;
}

/* Caja de consentimiento / Habeas Data (Branding Arquitectónico PH - Sin amarillos estridentes) */
html.login-ph #consentBox {
  background: var(--bg-elevated, #f8fafc) !important;
  border: 1px solid var(--border, #e2e8f0) !important;
  color: var(--text-secondary, #334155) !important;
  border-radius: 12px !important;
  transition: all 0.2s ease;
  animation: none !important;
}
html.login-ph #consentBox:hover {
  border-color: var(--primary) !important;
}
html.login-ph #consentBox a,
html.login-ph #consentPrivacyLink {
  color: var(--primary) !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
}
html.login-ph #consentBox a:hover,
html.login-ph #consentPrivacyLink:hover {
  color: var(--primary-hover) !important;
}
html.login-ph #consentMsg {
  color: var(--text-muted, #64748b) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
}
html.login-ph #consentMsg i {
  color: var(--primary) !important;
}
html.login-ph #consentCheck {
  accent-color: var(--primary) !important;
}
html.login-ph #consentBox.consent-ok {
  background: rgba(16, 185, 129, 0.05) !important;
  border-color: rgba(16, 185, 129, 0.4) !important;
}

/* Consentimiento en Piedra Caliza & Travertino */
html.login-ph.ph-theme-caliza #consentBox,
html.login-ph.ph-theme-hormigon #consentBox {
  background: #eee6d8 !important;
  border: 1px solid #ded3c1 !important;
  color: #44403c !important;
}
html.login-ph.ph-theme-caliza #consentBox:hover,
html.login-ph.ph-theme-hormigon #consentBox:hover {
  border-color: var(--primary) !important;
  background: #e5dcce !important;
}
html.login-ph.ph-theme-caliza #consentMsg,
html.login-ph.ph-theme-hormigon #consentMsg {
  color: #78716c !important;
}
html.login-ph.ph-theme-caliza #consentMsg i,
html.login-ph.ph-theme-hormigon #consentMsg i {
  color: var(--primary) !important;
}
html.login-ph.ph-theme-caliza #consentBox.consent-ok,
html.login-ph.ph-theme-hormigon #consentBox.consent-ok {
  background: rgba(16, 185, 129, 0.08) !important;
  border-color: rgba(16, 185, 129, 0.45) !important;
}

/* Botones OAuth (Google, LinkedIn, Microsoft) */
html.login-ph .oauth-btn {
  background: #ffffff !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px;
  font-weight: 600;
  transition: all 0.2s ease;
}
html.login-ph .oauth-btn:hover {
  background: var(--bg-elevated) !important;
  border-color: var(--border-active) !important;
}
html.login-ph.ph-theme-caliza .oauth-btn,
html.login-ph.ph-theme-hormigon .oauth-btn {
  background: #eee6d8 !important;
  border: 1px solid #ded3c1 !important;
  color: #1c1917 !important;
}
html.login-ph.ph-theme-caliza .oauth-btn:hover,
html.login-ph.ph-theme-hormigon .oauth-btn:hover {
  background: #e5dcce !important;
  border-color: #c2410c !important;
}

/* Botón Switcher de Tema Arquitectónico (Blanco / Piedra Caliza) */
html.login-ph #loginThemeBtn {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 100;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg-surface);
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
  transition: all 0.2s ease;
}
html.login-ph #loginThemeBtn:hover {
  color: var(--primary);
  background: var(--bg-elevated);
  border-color: var(--border-active);
  transform: scale(1.05);
}
html.login-ph.ph-theme-caliza #loginThemeBtn,
html.login-ph.ph-theme-hormigon #loginThemeBtn {
  background: #fbf8f2 !important;
  border-color: #ded3c1 !important;
  color: #78716c !important;
  box-shadow: 0 2px 8px rgba(28, 25, 23, 0.08) !important;
}
html.login-ph.ph-theme-caliza #loginThemeBtn:hover,
html.login-ph.ph-theme-hormigon #loginThemeBtn:hover {
  background: #eee6d8 !important;
  border-color: #c2410c !important;
  color: #c2410c !important;
}
html.login-ph #loginLangWrap {
  right: 66px !important;
}

/* Selector de Idioma en PH */
html.login-ph #loginLangSelect {
  background: var(--bg-surface) !important;
  color: var(--text-main) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
}
html.login-ph.ph-theme-caliza #loginLangSelect,
html.login-ph.ph-theme-hormigon #loginLangSelect {
  background: #fbf8f2 !important;
  border: 1px solid #ded3c1 !important;
  color: #1c1917 !important;
}

/* Modal de Privacidad en PH */
html.login-ph.ph-theme-caliza #privacidadModalCard,
html.login-ph.ph-theme-hormigon #privacidadModalCard {
  background: #fbf8f2 !important;
  border: 1px solid #ded3c1 !important;
}
html.login-ph.ph-theme-caliza #privacidadModalBody,
html.login-ph.ph-theme-hormigon #privacidadModalBody {
  background: #f4efe6 !important;
}

/* Badge de Marca con Isotipo de Ladrillos */
html.login-ph .login-ph-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
html.login-ph .login-ph-badge .ph-mark {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgba(194, 65, 12, 0.10);
  border: 1px solid rgba(194, 65, 12, 0.25);
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(194, 65, 12, 0.12);
  transition: transform 0.2s ease;
}
html.login-ph .login-ph-badge:hover .ph-mark {
  transform: scale(1.05);
  background: var(--primary);
  color: #ffffff;
}

html.login-ph .login-ph-chip-ph {
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--primary);
  color: #ffffff;
  border: 1px solid rgba(254, 215, 170, 0.4);
  box-shadow: 0 2px 6px rgba(194, 65, 12, 0.2);
}

/* Panel de recuperación de contraseña */
html.login-ph #panelForgot span,
html.login-ph #forgotSuccess p {
  color: var(--text-primary) !important;
}

/* Cabecera unificada en una sola línea (Logo original + Badge de portal) */
html.login-ph #loginSubtitle {
  display: none !important;
}

html.login-ph #authTitle {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-main) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  padding: 4px 11px !important;
  border-radius: 9999px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  white-space: nowrap;
  flex-shrink: 0;
}

html.login-ph #authTitle i {
  color: var(--primary) !important;
  font-size: 12px;
}

html.login-ph #phPortalChip {
  display: none !important;
}

@media (max-width: 420px) {
  html.login-ph .login-ph-badge .ph-mark {
    width: 32px;
    height: 32px;
  }
  html.login-ph #authTitle {
    font-size: 10.5px !important;
    padding: 3px 8px !important;
    gap: 4px;
  }
}

/* Footer limpio en PH */
html.login-ph #loginFooterAttribution {
  color: var(--text-muted) !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
}