/*
Theme Name: ITServicios Portal de Personal
Theme URI: https://personal.itservicios.cl
Author: ITServicios
Description: Tema del portal de personal de ITServicios. Disenado sobre el sistema visual Modernist: plano, sin esquinas redondeadas, reglas de 2px y todo alineado a la izquierda. Requiere el plugin "ITServicios - Portal de Personal".
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: itsp-theme
*/

:root {
  --itsp-bg: #f3f2f2;
  --itsp-text: #383c5a;
  --itsp-acento: #107060;
  --itsp-acento-600: #0b5c4d;
  --itsp-acento-700: #0b5749;
  --itsp-n400: #bab6b6;
  --itsp-n700: #605d5d;
  --itsp-divider: rgba(56, 60, 90, 0.4);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--itsp-bg);
  color: var(--itsp-text);
  font-family: "Archivo", 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: #cbe7e1; }
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 { border-top: 2px solid var(--itsp-divider); padding: 20px 32px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--itsp-n700); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

.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: 2px 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-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: #f3f2f2;
  --itsp-surface: #eae9e9;
  --itsp-text: #383c5a;
  --itsp-divider: rgba(56, 60, 90, 0.4);
  --itsp-acento: #107060;
  --itsp-acento-600: #0b5c4d;
  --itsp-acento-700: #0b5749;
  --itsp-n400: #bab6b6;
  --itsp-n700: #605d5d;
  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: 32px; width: 125px; 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; }
}