/* ITServicios - Portal de Personal
   Sistema visual Modernist: plano, sin radios, reglas de 2px, todo a la izquierda.
   Colores tomados del logo de la empresa. */

.itsp-app, .itsp-login {
  --itsp-bg: #f3f2f2;
  --itsp-surface: #eae9e9;
  --itsp-text: #383c5a;
  --itsp-divider: rgba(56, 60, 90, 0.4);
  --itsp-acento: #107060;
  --itsp-acento-100: #eaf5f2;
  --itsp-acento-200: #cbe7e1;
  --itsp-acento-600: #0b5c4d;
  --itsp-acento-700: #0b5749;
  --itsp-acento-800: #073f35;
  --itsp-n200: #eae7e7;
  --itsp-n400: #bab6b6;
  --itsp-n700: #605d5d;
  --itsp-n800: #444141;
  font-family: "Archivo", system-ui, sans-serif;
  color: var(--itsp-text);
  background: var(--itsp-bg);
  font-size: 14px;
  line-height: 1.5;
}

.itsp-app *, .itsp-login * { box-sizing: border-box; border-radius: 0 !important; }

/* --- Tipografia --- */
.itsp-h1 { font-size: 44px; font-weight: 900; line-height: 1; letter-spacing: -0.03em; margin: 8px 0 0; }
.itsp-h2 { font-size: 30px; font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; margin: 0; }
.itsp-kicker { font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--itsp-n700); font-weight: 700; }
.itsp-kicker-claro { color: rgba(255,255,255,0.85); }
.itsp-fuerte { font-weight: 700; }
.itsp-sec { font-size: 12px; color: var(--itsp-n700); }
.itsp-sec2 { color: var(--itsp-n800); }
.itsp-etiqueta { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--itsp-n700); }
.itsp-num { text-align: right; }
.itsp-num-fuerte { font-size: 18px; font-weight: 900; }
.itsp-nota { font-size: 12px; color: var(--itsp-n700); }
.itsp-vacio { color: var(--itsp-n700); padding: 24px 0; }
.itsp-mt { margin-top: 32px; }
.itsp-td-der { text-align: right; }

.itsp-app a { color: var(--itsp-acento-700); text-decoration: none; }
.itsp-app a:hover { color: var(--itsp-acento); text-decoration: underline; }
.itsp-app :focus-visible, .itsp-login :focus-visible { outline: 2px solid var(--itsp-acento); outline-offset: 2px; }

/* --- Barra superior --- */
.itsp-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; padding: 14px 32px; border-bottom: 2px solid var(--itsp-text); }
.itsp-bar-marca { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; min-width: 0; }
.itsp-logo-bar { height: 26px; width: 102px; display: block; }
.itsp-bar-sub { font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--itsp-n700); padding-left: 16px; border-left: 2px solid var(--itsp-divider); }
.itsp-bar-der { display: flex; align-items: center; gap: 16px 20px; flex-wrap: wrap; min-width: 0; }
.itsp-nav { display: flex; gap: 12px 20px; flex-wrap: wrap; }
.itsp-nav-item { font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; color: var(--itsp-text) !important; }
.itsp-nav-item.is-activo { color: var(--itsp-acento-700) !important; box-shadow: inset 0 -3px 0 var(--itsp-acento); padding-bottom: 3px; }
.itsp-sesion { display: flex; align-items: center; gap: 10px; padding-left: 20px; border-left: 2px solid var(--itsp-divider); flex: none; }
.itsp-sesion-datos { display: flex; flex-direction: column; }
.itsp-sesion-nombre { font-size: 12px; font-weight: 700; }
.itsp-sesion-rol { font-size: 11px; color: var(--itsp-n700); }

/* --- Monogramas --- */
.itsp-mono { width: 34px; height: 34px; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--itsp-n200); border: 2px solid var(--itsp-text); font-size: 12px; font-weight: 800; }
.itsp-mono-oscuro { width: 30px; height: 30px; background: var(--itsp-text); color: var(--itsp-bg); border: 0; }
.itsp-mono-xl { width: 92px; height: 92px; font-size: 30px; font-weight: 900; }

/* --- Botones --- */
.itsp-btn { display: inline-block; font-family: inherit; font-size: 13px; font-weight: 700; text-align: left; padding: 10px 16px; border: 2px solid var(--itsp-text); background: transparent; color: var(--itsp-text) !important; cursor: pointer; text-decoration: none !important; }
.itsp-btn:hover { background: var(--itsp-acento-100); border-color: var(--itsp-acento-700); color: var(--itsp-acento-700) !important; }
.itsp-btn-pri { background: var(--itsp-acento); border-color: var(--itsp-acento); color: #fff !important; }
.itsp-btn-pri:hover { background: var(--itsp-acento-600); border-color: var(--itsp-acento-600); color: #fff !important; }
.itsp-btn-sec { font-size: 12px; padding: 8px 12px; }
.itsp-btn-mini { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; padding: 7px 10px; border-color: var(--itsp-n400); color: var(--itsp-n800) !important; margin-left: 8px; }
.itsp-inline { display: inline-flex; gap: 8px; margin: 0; }
.itsp-acciones { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; }

/* --- Etiquetas de estado --- */
.itsp-tag { display: inline-block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; padding: 5px 9px; }
.itsp-tag-borde { border: 2px solid var(--itsp-text); color: var(--itsp-text); }
.itsp-tag-acento { background: var(--itsp-acento-200); color: var(--itsp-acento-800); }
.itsp-tag-neutro { background: var(--itsp-n200); color: var(--itsp-n800); }
.itsp-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }

/* --- Cabeceras y bloques --- */
.itsp-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; padding: 40px 32px 24px; }
.itsp-cab-simple { align-items: flex-start; }
.itsp-bloque { padding: 32px 32px 56px; }
.itsp-seccion { font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--itsp-n700); font-weight: 700; padding-bottom: 12px; border-bottom: 2px solid var(--itsp-text); margin-top: 32px; }
.itsp-seccion:first-child { margin-top: 0; }
.itsp-seccion-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.itsp-seccion-cab .itsp-seccion { flex: 1; }
.itsp-hr { height: 2px; background: var(--itsp-divider); }
.itsp-volver { display: inline-block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; margin-bottom: 16px; }

/* --- Indicadores --- */
.itsp-stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 2px solid var(--itsp-text); border-bottom: 2px solid var(--itsp-text); }
.itsp-stat { padding: 20px 32px; border-right: 2px solid var(--itsp-divider); }
.itsp-stat:last-child { border-right: 0; }
.itsp-cifra { font-size: 32px; font-weight: 900; line-height: 1; letter-spacing: -0.02em; }
.itsp-stat-k { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--itsp-n700); margin-top: 4px; }

/* --- Dos columnas --- */
.itsp-dos-col { display: grid; grid-template-columns: 1fr 1fr; }
.itsp-dos-col > * { padding: 32px; }
.itsp-dos-col-form { gap: 48px; }
.itsp-dos-col-form > * { padding: 0; }
.itsp-col-borde, .itsp-dos-col-linea > *:first-child { border-right: 2px solid var(--itsp-divider); }
.itsp-dos-col-linea > *:first-child { padding-left: 0; }
.itsp-dos-col-linea > *:last-child { padding-right: 0; }

/* --- Filas --- */
.itsp-fila-persona, .itsp-fila-sol { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 2px solid var(--itsp-divider); }
.itsp-fila-datos { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.itsp-fila-hito { display: grid; grid-template-columns: 150px 110px 1fr; gap: 24px; padding: 16px 0; border-bottom: 2px solid var(--itsp-divider); }

/* --- Tabla --- */
.itsp-tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.itsp-tabla th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--itsp-n700); font-weight: 700; padding: 14px 12px 12px; border-bottom: 2px solid var(--itsp-text); }
.itsp-tabla th:first-child, .itsp-tabla td:first-child { padding-left: 0; }
.itsp-tabla td { padding: 14px 12px; border-bottom: 2px solid var(--itsp-divider); vertical-align: middle; }
.itsp-celda-persona { display: flex; align-items: center; gap: 12px; }

/* --- Pestanas --- */
.itsp-tabs { display: flex; flex-wrap: wrap; padding: 0 32px; border-top: 2px solid var(--itsp-text); border-bottom: 2px solid var(--itsp-text); }
.itsp-tab { font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; padding: 16px 20px; color: var(--itsp-n700) !important; }
.itsp-tab.is-activo { color: var(--itsp-acento-700) !important; box-shadow: inset 0 -4px 0 var(--itsp-acento); }

/* --- Ficha --- */
.itsp-ficha-cab { padding: 32px 32px 24px; }
.itsp-ficha-id { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.itsp-ficha-persona { display: flex; align-items: flex-start; gap: 20px; }
.itsp-ficha-cargo { font-size: 15px; color: var(--itsp-n800); margin-top: 8px; }
.itsp-dl { display: grid; grid-template-columns: 160px 1fr; gap: 16px; padding: 10px 0; border-bottom: 2px solid var(--itsp-n200); }
.itsp-dl-k { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--itsp-n700); }
.itsp-dl-v { font-weight: 500; }

/* --- Trayectoria --- */
.itsp-hito { display: grid; grid-template-columns: 120px 1fr; gap: 24px; padding: 20px 0; border-bottom: 2px solid var(--itsp-divider); }
.itsp-anio { font-size: 22px; font-weight: 900; letter-spacing: -0.02em; color: var(--itsp-acento-700); }
.itsp-hito-cargo { font-size: 16px; font-weight: 700; }
.itsp-hito-nota { color: var(--itsp-n800); max-width: 70ch; margin-top: 4px; }

/* --- Rejillas de datos --- */
.itsp-grid-eval { display: grid; grid-template-columns: 1fr 130px 130px 130px 110px; gap: 24px; align-items: center; padding: 16px 0; border-bottom: 2px solid var(--itsp-divider); }
.itsp-grid-doc { display: grid; grid-template-columns: 1fr 180px 120px 110px; gap: 24px; align-items: center; padding: 16px 0; border-bottom: 2px solid var(--itsp-divider); }
.itsp-grid-aus { display: grid; grid-template-columns: 170px 1fr 110px 130px; gap: 24px; align-items: center; padding: 16px 0; border-bottom: 2px solid var(--itsp-divider); }
.itsp-grid-eq { display: grid; grid-template-columns: 1fr 200px 140px 130px; gap: 24px; align-items: center; padding: 16px 0; border-bottom: 2px solid var(--itsp-divider); }
.itsp-grid-sol { display: grid; grid-template-columns: 1fr 150px 220px 100px 120px 200px; gap: 20px; align-items: center; padding: 16px 0; border-bottom: 2px solid var(--itsp-divider); }
.itsp-grid-area { display: grid; grid-template-columns: 220px 110px 1fr 90px; gap: 24px; align-items: center; padding: 18px 0; border-bottom: 2px solid var(--itsp-divider); }
.itsp-grid-roles { display: grid; grid-template-columns: 1fr 110px 110px 110px; gap: 16px; padding: 14px 0; border-bottom: 2px solid var(--itsp-divider); }
.itsp-grid-eval-head, .itsp-grid-roles-head, .itsp-grid-crit-head { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--itsp-n700); font-weight: 700; }
.itsp-grid-eval-head, .itsp-grid-roles-head { border-bottom-color: var(--itsp-divider); }

/* --- Hoja 1:1 --- */
.itsp-grid-crit { display: grid; grid-template-columns: 1fr 120px 120px 100px; gap: 24px; align-items: center; padding: 16px 0; border-bottom: 2px solid var(--itsp-divider); }
.itsp-grid-crit-head { padding: 40px 0 12px; border-bottom: 2px solid var(--itsp-text); }
.itsp-grid-crit-head:first-child { padding-top: 0; }
.itsp-nota-input { width: 64px; font-family: inherit; font-size: 14px; font-weight: 700; text-align: right; padding: 8px 10px; border: 2px solid var(--itsp-n400); background: #fff; color: var(--itsp-text); }
.itsp-nota-empresa { border-color: var(--itsp-acento); }
.itsp-nota-fija { font-weight: 700; }
.itsp-ta-empresa { border-color: var(--itsp-acento) !important; }
.itsp-poster-cierre { background: var(--itsp-acento); color: #fff; padding: 32px; display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.itsp-poster-reco { font-size: 32px; font-weight: 900; line-height: 1.05; letter-spacing: -0.02em; max-width: 40ch; margin-top: 8px; }
.itsp-poster-nota { font-size: 64px; font-weight: 900; line-height: 1; letter-spacing: -0.03em; }

/* --- Tarjetas --- */
.itsp-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 16px; }
.itsp-card { background: var(--itsp-surface); border: 2px solid var(--itsp-divider); padding: 20px; display: flex; flex-direction: column; gap: 8px; min-height: 150px; }
.itsp-card-anio { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; color: var(--itsp-acento-700); }
.itsp-card-titulo { font-size: 17px; font-weight: 800; line-height: 1.15; letter-spacing: -0.01em; }
.itsp-card-pie { margin-top: auto; font-size: 12px; color: var(--itsp-n700); }

/* --- Barras --- */
.itsp-barra-fondo { background: var(--itsp-n200); }
.itsp-barra { height: 10px; background: var(--itsp-acento); }

/* --- Formularios --- */
.itsp-form { margin: 0; }
.itsp-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.itsp-field > span { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--itsp-n700); font-weight: 700; }
.itsp-field input, .itsp-field select, .itsp-field textarea { font-family: inherit; font-size: 14px; padding: 11px 12px; border: 2px solid var(--itsp-n400); background: #fff; color: var(--itsp-text); width: 100%; }
.itsp-field textarea { resize: vertical; }
.itsp-field input:disabled, .itsp-field textarea:disabled, .itsp-field select:disabled { opacity: 0.45; }
.itsp-form-pie { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 20px; margin-top: 20px; border-top: 2px solid var(--itsp-text); }
.itsp-buscador { display: flex; gap: 8px; margin: 0; }
.itsp-buscador input { font-family: inherit; font-size: 13px; padding: 10px 12px; width: 280px; max-width: 100%; border: 2px solid var(--itsp-n400); background: #fff; color: var(--itsp-text); }
.itsp-vac { display: grid; grid-template-columns: 320px 1fr; }
.itsp-vac-form { padding: 32px; border-right: 2px solid var(--itsp-divider); }
.itsp-vac-lista { padding: 32px 32px 56px; }

/* --- Avisos --- */
.itsp-aviso { background: var(--itsp-acento-100); border-top: 2px solid var(--itsp-acento); border-bottom: 2px solid var(--itsp-acento); padding: 12px 32px; font-size: 12px; color: var(--itsp-acento-800); }
.itsp-aviso-error { background: #fdecea; border-color: #b3261e; color: #7c1d16; }

/* --- Login --- */
.itsp-login { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }
.itsp-login-poster { background: var(--itsp-acento); color: #fff; padding: 48px; display: flex; flex-direction: column; justify-content: space-between; gap: 48px; }
.itsp-poster-marca { font-size: 20px; font-weight: 900; letter-spacing: -0.01em; }
.itsp-poster-dominio { font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em; opacity: 0.85; margin-top: 4px; }
.itsp-poster-titular { font-size: 56px; font-weight: 900; line-height: 0.95; letter-spacing: -0.03em; text-wrap: pretty; }
.itsp-poster-pie { font-size: 13px; opacity: 0.9; max-width: 34ch; }
.itsp-login-form { padding: 48px; display: flex; align-items: center; }
.itsp-login-col { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 16px; }
.itsp-logo-login { height: 32px; width: 125px; display: block; align-self: flex-start; }
.itsp-login .login-username, .itsp-login .login-password { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.itsp-login label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--itsp-n700); font-weight: 700; }
.itsp-login input[type="text"], .itsp-login input[type="password"] { font-family: inherit; font-size: 14px; padding: 11px 12px; border: 2px solid var(--itsp-n400); background: #fff; color: var(--itsp-text); width: 100%; }
.itsp-login .login-remember { font-size: 12px; margin-bottom: 16px; }
.itsp-login .login-remember label { text-transform: none; letter-spacing: 0; font-weight: 400; }
.itsp-login #wp-submit { font-family: inherit; font-size: 14px; font-weight: 700; text-align: left; padding: 13px 16px; border: 2px solid var(--itsp-acento); background: var(--itsp-acento); color: #fff; cursor: pointer; width: 100%; }
.itsp-login #wp-submit:hover { background: var(--itsp-acento-600); border-color: var(--itsp-acento-600); }

/* --- Responsive --- */
@media (max-width: 1100px) {
  .itsp-grid-sol { grid-template-columns: 1fr 130px 200px 90px 110px; }
  .itsp-grid-sol > *:last-child { grid-column: 1 / -1; text-align: left; }
}
@media (max-width: 900px) {
  .itsp-h1 { font-size: 32px; }
  .itsp-poster-titular { font-size: 36px; }
  .itsp-login { grid-template-columns: 1fr; min-height: 0; }
  .itsp-login-poster { gap: 24px; padding: 32px; }
  .itsp-login-form { padding: 32px; }
  .itsp-dos-col, .itsp-vac { grid-template-columns: 1fr; }
  .itsp-dos-col-linea > *:first-child, .itsp-col-borde, .itsp-vac-form { border-right: 0; border-bottom: 2px solid var(--itsp-divider); }
  .itsp-dos-col > *, .itsp-dos-col-linea > *:first-child, .itsp-dos-col-linea > *:last-child { padding: 24px 0; }
  .itsp-stats { grid-template-columns: 1fr 1fr; }
  .itsp-stat { border-bottom: 2px solid var(--itsp-divider); }
  .itsp-cards { grid-template-columns: 1fr; }
  .itsp-cab, .itsp-bloque, .itsp-ficha-cab, .itsp-vac-lista, .itsp-vac-form, .itsp-tabs, .itsp-bar, .itsp-aviso, .itsp-poster-cierre { padding-left: 20px; padding-right: 20px; }
  .itsp-dl, .itsp-hito, .itsp-fila-hito, .itsp-grid-eval, .itsp-grid-doc, .itsp-grid-aus, .itsp-grid-eq, .itsp-grid-sol, .itsp-grid-area, .itsp-grid-crit { grid-template-columns: 1fr; gap: 6px; }
  .itsp-grid-eval-head, .itsp-grid-crit-head, .itsp-grid-roles-head { display: none; }
  .itsp-num { text-align: left; }
  .itsp-mono-xl { width: 64px; height: 64px; font-size: 22px; }
  .itsp-btn { min-height: 44px; display: inline-flex; align-items: center; }
  .itsp-tabla thead { display: none; }
  .itsp-tabla, .itsp-tabla tbody, .itsp-tabla tr, .itsp-tabla td { display: block; width: 100%; }
  .itsp-tabla tr { border-bottom: 2px solid var(--itsp-text); padding: 12px 0; }
  .itsp-tabla td { border: 0; padding: 4px 0; }
  .itsp-td-der { text-align: left; }
  .itsp-poster-nota { font-size: 44px; }
  .itsp-poster-reco { font-size: 24px; }
}