/*
Theme Name: CentralPyme RR.HH.
Theme URI: https://centralpyme.cl/rrhh
Author: CentralPyme
Description: Tema del portal de personal de CentralPyme RR.HH. Estilo limpio y luminoso, con bordes redondeados y la tipografía Plus Jakarta Sans. Requiere el plugin "CentralPyme RR.HH. - Portal de Personal".
Version: 1.1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: itsp-theme
*/

:root {
  --itsp-bg: #F1F5F9;
  --itsp-text: #0F172A;
  --itsp-acento: #6366F1;
  --itsp-acento-600: #4F46E5;
  --itsp-acento-700: #4338CA;
  --itsp-n400: #94A3B8;
  --itsp-n700: #475569;
  --itsp-divider: rgba(15, 23, 42, 0.22);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--itsp-bg);
  color: var(--itsp-text);
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--itsp-acento-700); text-decoration: none; }
a:hover { color: var(--itsp-acento); text-decoration: underline; }
:focus-visible { outline: 2px solid var(--itsp-acento); outline-offset: 2px; }
::selection { background: #E0E7FF; }
img { max-width: 100%; height: auto; }

/* El plugin trae sus propios estilos; el tema solo aporta el lienzo. */
.itsp-lienzo { min-height: 100vh; }

/* Contenido corriente (paginas informativas) */
.itsp-contenido { max-width: 70ch; padding: 40px 32px 64px; }
.itsp-contenido h1 { font-size: 44px; font-weight: 900; line-height: 1; letter-spacing: -0.03em; margin: 0 0 24px; }
.itsp-contenido h2 { font-size: 24px; font-weight: 800; letter-spacing: -0.01em; margin: 40px 0 12px; }
.itsp-contenido p { margin: 0 0 16px; }
.itsp-contenido hr { border: 0; height: 2px; background: var(--itsp-divider); margin: 32px 0; }

.itsp-pie { background: #fff; border-top: 1px solid #E2E8F0; padding: 20px 32px; display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; }
.itsp-pie-texto { display: flex; gap: 24px; flex-wrap: wrap; font-size: 13px; color: var(--itsp-n700); }
.itsp-pie-logo { height: 32px; width: auto; display: block; flex: none; }

.itsp-404 { padding: 80px 32px; }
.itsp-404 h1 { font-size: 56px; font-weight: 900; letter-spacing: -0.03em; margin: 0 0 16px; }

.itsp-btn-tema { display: inline-block; font-weight: 700; padding: 11px 18px; border-radius: 10px; border: 1px solid var(--itsp-acento); background: var(--itsp-acento); color: #fff !important; text-decoration: none !important; }
.itsp-btn-tema:hover { background: var(--itsp-acento-600); border-color: var(--itsp-acento-600); }

@media (max-width: 900px) {
  .itsp-pie { padding: 16px 20px; gap: 12px; }
  .itsp-pie-texto { gap: 6px; flex-direction: column; }
  .itsp-contenido { padding: 32px 20px 48px; }
  .itsp-contenido h1 { font-size: 32px; }
  .itsp-pie { padding: 20px; }
  .itsp-404 { padding: 48px 20px; }
}

/* --- Portada --- */
.itsp-portada {
  --itsp-bg: #F1F5F9;
  --itsp-surface: #E2E8F0;
  --itsp-text: #0F172A;
  --itsp-divider: rgba(15, 23, 42, 0.22);
  --itsp-acento: #6366F1;
  --itsp-acento-600: #4F46E5;
  --itsp-acento-700: #4338CA;
  --itsp-n400: #94A3B8;
  --itsp-n700: #475569;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: calc(100vh - 62px);
}
.itsp-portada .itsp-login-poster { background: var(--itsp-acento); color: #fff; padding: 48px; display: flex; flex-direction: column; justify-content: space-between; gap: 48px; }
.itsp-portada .itsp-poster-marca { font-size: 20px; font-weight: 900; letter-spacing: -0.01em; }
.itsp-portada .itsp-poster-dominio { font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em; opacity: 0.85; margin-top: 4px; }
.itsp-portada .itsp-poster-titular { font-size: 56px; font-weight: 900; line-height: 0.95; letter-spacing: -0.03em; text-wrap: pretty; }
.itsp-portada .itsp-poster-pie { font-size: 13px; opacity: 0.9; max-width: 34ch; }
.itsp-portada .itsp-login-form { padding: 48px; display: flex; align-items: center; }
.itsp-portada .itsp-login-col { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 16px; }
.itsp-portada .itsp-logo-login { height: 56px; width: auto; display: block; align-self: flex-start; }
.itsp-portada .itsp-kicker { font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--itsp-n700); font-weight: 700; }
.itsp-portada .itsp-h2 { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; margin: 0; }
.itsp-portada .itsp-hr { height: 2px; background: var(--itsp-divider); }
.itsp-portada p { margin: 0; max-width: 52ch; }
.itsp-portada .itsp-nota { font-size: 12px; color: var(--itsp-n700); }

@media (max-width: 900px) {
  .itsp-portada { grid-template-columns: 1fr; min-height: 0; }
  .itsp-portada .itsp-login-poster { padding: 32px; gap: 24px; }
  .itsp-portada .itsp-poster-titular { font-size: 36px; }
  .itsp-portada .itsp-login-form { padding: 32px 20px 48px; }
}