:root{
  --brand:#E31B23;      /* Rojo corporativo */
  --brand-soft:#fde8e9;
  --bg:#F5F6F8;
  --card:#FFFFFF;
  --text:#1F2937;
  --muted:#6B7280;
  --border:#E5E7EB;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

.container{
  max-width: 1000px;
  margin: 40px auto;
  padding: 0 16px;
}

.header{
  display:flex;
  align-items:center;
  gap:22px;
  margin-bottom:24px;
}

.brand-badge{
  width:110px;
  height:110px;
  background: #fff;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
  overflow:hidden;
}

.brand-badge img{
  width:100%;
  height:auto;
}

h1{
  margin:0;
  font-size:22px;
  font-weight:800;
  color: var(--brand);
}

h6{
  margin:0;
  font-size:12px;
  font-weight:800;
  color: var(--brand);
}

.subtitle{
  margin-top:6px;
  color: var(--muted);
  font-size:14px;
}

.card{
  background: var(--card);
  border-radius:20px;
  padding:24px;
  border:1px solid var(--border);
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}

.grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:16px;
}

@media (max-width: 820px){
  .grid{ grid-template-columns: 1fr; }
}

.field label{
  display:block;
  font-size:13px;
  margin-bottom:6px;
  color: var(--muted);
  font-weight:700;
}

.field input,
.field textarea,
.field select{
  width:100%;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid var(--border);
  background:#fff;
  font-size:14px;
  color:var(--text);
}

.field input:focus,
.field textarea:focus,
.field select:focus{
  outline:none;
  border-color: var(--brand);
  box-shadow: 0 0 0 2px rgba(227,27,35,.15);
}

hr{
  border:none;
  border-top:1px solid var(--border);
  margin:22px 0;
}

.row{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
}

.actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:10px;
}

button{
  border-radius:10px;
  padding:10px 14px;
  border:1px solid var(--border);
  background:#fff;
  cursor:pointer;
  font-size:14px;
}

button:hover{ background:#F9FAFB; }

button.primary{
  background: var(--brand);
  color:#fff;
  border:1px solid var(--brand);
  font-weight:700;
}

button.primary:hover{ background:#c9151d; }

.alert{
  margin-bottom:16px;
  padding:14px;
  border-radius:12px;
  background:#fde8e9;
  border:1px solid rgba(227,27,35,.4);
  color:#7f1d1d;
  font-size:14px;
}

.ok{
  background:#ecfdf5;
  border:1px solid #34d399;
  color:#065f46;
}

.small{
  font-size:12px;
  color:var(--muted);
  margin-top:6px;
}

/* ====== FIRMA ====== */
.canvas-wrap{
  border:1px dashed var(--border);
  border-radius:16px;
  padding:14px;
  background:#fff;
}

canvas{
  width:100%;
  height:180px;
  background:#fff;
  border-radius:12px;
  border:1px solid var(--border);
  touch-action:none;
}

/* =========================
   FIRMA + CONSENTIMIENTO (ARREGLADO)
========================= */
.signature-consent{
  display:grid;
  grid-template-columns: 2fr 1.2fr;
  gap:20px;
  margin-top:20px;
}

@media (max-width: 820px){
  .signature-consent{
    grid-template-columns: 1fr;
  }
}

/* Consentimiento compacto */
.consent{
  padding:16px;
  background: var(--brand-soft);
  border-radius:14px;
  border:1px solid rgba(227,27,35,.25);
  font-size:14px;
}

.consent-check{
  display:flex;
  gap:12px;
  align-items:flex-start;
  line-height:1.4;
}

.consent-check input{
  margin-top:4px;
  transform: scale(1.1);
}

.consent a{
  color: var(--brand);
  font-weight:800;
  text-decoration: underline;
}

/* =========================
   DASHBOARD FULL WIDTH
========================= */

/* Contenedor normal sigue igual */
.container{
  max-width: 1000px;
  margin: 40px auto;
  padding: 0 16px;
}

/* Contenedor ancho SOLO para dashboard */
.container-wide{
  max-width: 100%;
  margin: 24px auto;
  padding: 0 24px;
}

/* La tarjeta de la tabla ocupa todo el ancho */
.container-wide .card{
  max-width: 100%;
}

/* La tabla usa todo el ancho disponible */
.container-wide .table-wrap{
  width: 100%;
}

/* Mejora visual para pantallas grandes */
@media (min-width: 1400px){
  .container-wide{
    padding-left: 48px;
    padding-right: 48px;
  }
}

.info-box-green{
  background:#ECFDF5;          /* verde clarito */
  border:1px solid #10B981;    /* borde verde */
  border-radius:12px;
  padding:14px 16px;
  margin-top:12px;
  color:#065F46;
  font-size:14px;
  line-height:1.35;
}

.info-box-green strong{
  display:block;
  margin-bottom:6px;
  font-size:15px;
  color:#065F46;
}


/* =========================
   INDUCCIÓN PDF + PREGUNTAS
========================= */
.induction-card{
  margin-bottom:20px;
}

.induction-heading h2,
.security-quiz h2{
  margin:0;
  color:var(--brand);
  font-size:20px;
  line-height:1.25;
}

.pdf-viewer-wrap{
  margin-top:16px;
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  background:#fff;
}

.pdf-viewer{
  display:block;
  width:100%;
  height:76vh;
  min-height:560px;
  border:0;
  background:#f3f4f6;
}

.pdf-fallback{
  padding:10px 14px;
  font-size:13px;
  color:var(--muted);
  border-top:1px solid var(--border);
}

.pdf-fallback a{
  color:var(--brand);
  font-weight:800;
}

.form-card{
  margin-top:0;
}

.security-quiz{
  display:grid;
  gap:14px;
}

.quiz-title-row{
  margin-bottom:2px;
}

.question-card{
  margin:0;
  padding:16px;
  border:1px solid var(--border);
  border-radius:14px;
  background:#fff;
}

.question-card legend{
  padding:0 6px;
  color:var(--text);
  font-weight:800;
  font-size:14px;
  line-height:1.45;
}

.option-row{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:10px 12px;
  margin-top:8px;
  border:1px solid #eef0f3;
  border-radius:10px;
  cursor:pointer;
  line-height:1.4;
  font-size:14px;
}

.option-row:hover{
  border-color:rgba(227,27,35,.35);
  background:#fffafa;
}

.option-row input{
  flex:0 0 auto;
  margin-top:3px;
  accent-color:var(--brand);
}

@media (max-width: 820px){
  .pdf-viewer{
    height:65vh;
    min-height:440px;
  }
  .question-card{
    padding:13px;
  }
  .option-row{
    padding:9px;
  }
}

/* =========================
   MODAL DE REGISTRO EXITOSO
========================= */
body.modal-open {
  overflow: hidden;
}

.success-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(17, 24, 39, 0.68);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  animation: modalFadeIn .18s ease-out;
}

.success-modal-backdrop.is-closing {
  animation: modalFadeOut .18s ease-in forwards;
}

.success-modal-card {
  width: 100%;
  max-width: 440px;
  box-sizing: border-box;
  background: #ffffff;
  border: 1px solid #bbf7d0;
  border-radius: 22px;
  padding: 30px 24px 24px;
  text-align: center;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .32);
  animation: modalPopIn .22s ease-out;
}

.success-modal-icon {
  width: 70px;
  height: 70px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #ecfdf5;
  border: 2px solid #34d399;
  color: #059669;
  font-size: 40px;
  line-height: 1;
  font-weight: 900;
}

.success-modal-card h2 {
  margin: 0;
  color: #065f46;
  font-size: 22px;
  line-height: 1.25;
}

.success-modal-card p {
  margin: 12px 0 22px;
  color: #4b5563;
  font-size: 15px;
  line-height: 1.5;
}

.success-modal-button {
  width: 100%;
  min-height: 48px;
  font-size: 15px;
  border-radius: 12px;
}

@keyframes modalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes modalFadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes modalPopIn {
  from { transform: translateY(12px) scale(.97); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

@media (max-width: 600px) {
  .success-modal-backdrop {
    padding: 16px;
  }
  .success-modal-card {
    max-width: 390px;
    border-radius: 18px;
    padding: 26px 18px 18px;
  }
  .success-modal-icon {
    width: 62px;
    height: 62px;
    font-size: 36px;
  }
  .success-modal-card h2 {
    font-size: 20px;
  }
}