/* =============================================
   RYU Portal del Colaborador — CSS v2.0.3
   Grupo Empresarial RYU S.A.
============================================= */
:root {
  --ryu-pri:    #dd623f;   /* Naranja RYU */
  --ryu-dark:   #303030;   /* Carbón RYU */
  --ryu-sec:    #b84e2e;
  --ryu-teal:   #0891b2;
  --ryu-green:  #16a34a;
  --ryu-amber:  #d97706;
  --ryu-red:    #dc2626;
  --ryu-bg:     #f7f9fc;   /* Lienzo fresco */
  --ryu-card:   #ffffff;
  --ryu-border: #eef0f4;
  --ryu-text:   #303030;
  --ryu-muted:  #7a6860;
  --ryu-radius: 16px;
  --ryu-shadow: 0 8px 28px rgba(48,48,48,.10);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* Contenedor principal */
.ryu-portal {
  max-width: 780px;
  margin: 0 auto;
  padding: 20px 16px 40px;
  font-family: 'Segoe UI',system-ui,-apple-system,sans-serif;
  color: var(--ryu-text);
}

/* ── Header ── */
.ryu-portal-header {
  background: linear-gradient(135deg, var(--ryu-pri) 0%, #dd623f 100%);
  border-radius: var(--ryu-radius);
  padding: 28px 24px 22px;
  text-align: center;
  color: #fff;
  margin-bottom: 20px;
  box-shadow: var(--ryu-shadow);
}
.ryu-portal-logo {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .5px;
}
.ryu-portal-subtitle {
  font-size: 13px;
  opacity: .8;
  margin-top: 4px;
}

/* ── Pasos / Stepper ── */
.ryu-portal-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 22px;
  flex-wrap: wrap;
  gap: 4px;
}
.ryu-step {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ryu-muted);
  padding: 6px 10px;
  border-radius: 20px;
  background: var(--ryu-card);
  border: 2px solid var(--ryu-border);
  transition: all .2s;
}
.ryu-step span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--ryu-border);
  font-size: 11px;
  font-weight: 700;
}
.ryu-step.active {
  color: var(--ryu-sec);
  border-color: var(--ryu-sec);
  background: #fff6f2;
}
.ryu-step.active span {
  background: var(--ryu-sec);
  color: #fff;
}
.ryu-step-line {
  width: 20px;
  height: 2px;
  background: var(--ryu-border);
  flex-shrink: 0;
}

/* ── Card principal ── */
.ryu-portal-card {
  background: var(--ryu-card);
  border-radius: var(--ryu-radius);
  padding: 28px 24px;
  box-shadow: var(--ryu-shadow);
  border: 1px solid var(--ryu-border);
}
.ryu-portal-card h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--ryu-pri);
  margin-bottom: 8px;
}
.ryu-portal-card > p {
  font-size: 13px;
  color: var(--ryu-muted);
  margin-bottom: 20px;
}

/* ── Campo del formulario ── */
.ryu-portal-field {
  margin-bottom: 16px;
}
.ryu-portal-field label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--ryu-muted);
  text-transform: uppercase;
  letter-spacing: .8px;
  margin-bottom: 6px;
}
.ryu-portal-field input,
.ryu-portal-field select,
.ryu-portal-field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 2px solid var(--ryu-border);
  border-radius: 10px;
  font-size: 14px;
  color: var(--ryu-text);
  background: #f4ede8;
  transition: border .15s, box-shadow .15s;
  outline: none;
}
.ryu-portal-field input:focus,
.ryu-portal-field select:focus,
.ryu-portal-field textarea:focus {
  border-color: var(--ryu-sec);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}

/* ── Grid ── */
.ryu-portal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.ryu-portal-span-2 { grid-column: span 2; }
@media (max-width: 560px) {
  .ryu-portal-grid { grid-template-columns: 1fr; }
  .ryu-portal-span-2 { grid-column: span 1; }
}

/* ── Botones ── */
.ryu-portal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 18px;
  font-size: 13px;
  font-weight: 700;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  background: var(--ryu-sec);
  color: #fff;
  text-decoration: none;
  transition: all .15s;
}
.ryu-portal-btn:hover { opacity: .88; transform: translateY(-1px); }
.ryu-portal-btn:active { transform: translateY(0); }
.ryu-portal-btn:disabled { opacity: .5; cursor: not-allowed; }
.ryu-portal-btn-full { width: 100%; margin-top: 4px; }
.ryu-portal-btn-green  { background: var(--ryu-green); }
.ryu-portal-btn-teal   { background: var(--ryu-teal); }
.ryu-portal-btn-ghost  {
  background: transparent;
  color: var(--ryu-muted);
  border: 2px solid var(--ryu-border);
}
.ryu-portal-btn-ghost:hover { border-color: var(--ryu-sec); color: var(--ryu-sec); }

/* ── Tarjeta del empleado ── */
.ryu-portal-emp-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: linear-gradient(135deg, #f0f7ff 0%, #e8f4fd 100%);
  border: 2px solid #fde8df;
  border-radius: 12px;
  padding: 16px 18px;
}
.ryu-portal-emp-avatar {
  font-size: 38px;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 50%;
  border: 2px solid #fde8df;
  flex-shrink: 0;
}
.ryu-portal-emp-info { flex: 1; min-width: 0; }
.ryu-portal-emp-nombre {
  font-size: 17px;
  font-weight: 800;
  color: var(--ryu-pri);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ryu-portal-emp-cargo {
  font-size: 13px;
  color: var(--ryu-sec);
  font-weight: 600;
  margin-top: 2px;
}
.ryu-portal-emp-unidad {
  font-size: 11px;
  color: var(--ryu-muted);
  margin-top: 3px;
}
.ryu-portal-vac-badge {
  text-align: center;
  background: #fff;
  border: 2px solid #bbf7d0;
  border-radius: 10px;
  padding: 8px 14px;
  flex-shrink: 0;
}
.ryu-portal-vac-num {
  font-size: 26px;
  font-weight: 900;
  color: var(--ryu-green);
  line-height: 1;
}
.ryu-portal-vac-lbl {
  font-size: 10px;
  font-weight: 600;
  color: var(--ryu-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-top: 3px;
}

/* ── Tabs del paso 2 ── */
.ryu-portal-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.ryu-portal-tab {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 700;
  border: 2px solid var(--ryu-border);
  border-radius: 20px;
  background: #fff;
  color: var(--ryu-muted);
  cursor: pointer;
  transition: all .15s;
}
.ryu-portal-tab:hover { border-color: var(--ryu-sec); color: var(--ryu-sec); }
.ryu-portal-tab.active {
  background: var(--ryu-sec);
  border-color: var(--ryu-sec);
  color: #fff;
}
.ryu-portal-tab-panel { display: block; }

/* ── Info card (filas de datos) ── */
.ryu-portal-info-card {
  background: #f4ede8;
  border: 1px solid var(--ryu-border);
  border-radius: 10px;
  overflow: hidden;
}
.ryu-portal-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid var(--ryu-border);
  font-size: 13px;
}
.ryu-portal-info-row:last-child { border-bottom: none; }
.ryu-portal-info-row span { color: var(--ryu-muted); }
.ryu-portal-info-row strong { font-weight: 700; text-align: right; }

/* ── Tabla ── */
.ryu-portal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-top: 6px;
}
.ryu-portal-table th {
  background: #f1f5f9;
  padding: 10px 12px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--ryu-muted);
  border-bottom: 2px solid var(--ryu-border);
}
.ryu-portal-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--ryu-border);
  color: var(--ryu-text);
}
.ryu-portal-table tr:last-child td { border-bottom: none; }
.ryu-portal-table tr:hover td { background: #f4ede8; }

/* ── Chip/badge ── */
.ryu-portal-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  background: #fff6f2;
  color: var(--ryu-sec);
  border: 1px solid #fde8df;
}

/* ── Empty state ── */
.ryu-portal-empty {
  text-align: center;
  padding: 36px 24px;
  color: var(--ryu-muted);
  font-size: 14px;
  background: #f4ede8;
  border-radius: 10px;
  border: 2px dashed var(--ryu-border);
}

/* ── Success (paso 4) ── */
.ryu-portal-success {
  text-align: center;
}
.ryu-portal-success-icon {
  font-size: 64px;
  margin-bottom: 16px;
}
.ryu-portal-success h2 {
  font-size: 22px;
  margin-bottom: 10px;
}

/* ── Footer ── */
.ryu-portal-footer {
  text-align: center;
  margin-top: 28px;
  font-size: 11px;
  color: var(--ryu-muted);
  letter-spacing: .3px;
}

/* ── Responsive ── */
@media (max-width: 480px) {
  .ryu-portal-card { padding: 18px 14px; }
  .ryu-portal-emp-card { flex-direction: column; text-align: center; }
  .ryu-portal-emp-nombre { white-space: normal; }
  .ryu-portal-steps { gap: 3px; }
  .ryu-step { font-size: 10px; padding: 5px 8px; }
  .ryu-step-line { width: 12px; }
}

/* ── BRAND HEADER ── */
.ryu-portal-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}
.ryu-portal-brand-logo {
  height: 50px;
  width: 50px;
}
.ryu-portal-brand-text strong {
  display: block;
  font-size: 16px;
  font-weight: 800;
  color: var(--ryu-pri);
  letter-spacing: .4px;
}
.ryu-portal-brand-text span {
  font-size: 12px;
  color: var(--ryu-muted);
  letter-spacing: .3px;
}

/* ── LOGIN FORM ENHANCEMENTS ── */
#portal-pass {
  letter-spacing: 3px;
}
.ryu-portal-btn-full {
  width: 100%;
  justify-content: center;
  padding: 13px 20px;
  font-size: 15px;
  border-radius: 10px;
}