:root {
      --bg-main: #0a0e17;
      --bg-panel: #111521;
      --border: #2a3247;
      --text: #cdd6f4;
      --text-light: #a6adc8;
      --accent: #89b4fa;
      --success: #9BE564;
      --warning: #F7C948;
      --danger: #FF6B6B;
      --card-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    }

    body {
      font-family: 'Segoe UI', system-ui, sans-serif;
      background: var(--bg-main);
      margin: 0;
      padding: 0;
      color: var(--text);
      display: flex;
      min-height: 100vh;
      flex-direction: column;
    }

    /* Responsive layout: columna en móviles, fila en pantallas grandes */
    @media (min-width: 900px) {
      body {
        flex-direction: row;
      }
    }

    main {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      padding: 16px;
    }

    header {
      margin-bottom: 20px;
      text-align: center;
    }

    h1 {
      font-size: 1.6em;
      font-weight: 500;
      color: var(--text);
      margin: 0 0 8px;
    }

    #resultado {
      font-size: 1.6em;
      font-weight: 600;
      color: var(--accent);
      margin: 8px 0 20px;
    }

    /* Video container responsive */
    #videoContainer {
      position: relative;
      width: 100%;
      max-width: 640px;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: var(--card-shadow);
      margin-bottom: 20px;
      aspect-ratio: 4 / 3;
      background: #000;
    }

    #canvas, #video {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      image-rendering: -webkit-optimize-contrast;
      image-rendering: crisp-edges;
    }

    #video { display: none; }

    /* Botón Iniciar centrado y responsive */
    #botonIniciar {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 10;
      padding: 16px 32px;
      font-size: 1.3em;
      font-weight: 600;
      background: linear-gradient(135deg, #1e40af, #1d4ed8);
      color: white;
      border: none;
      border-radius: 10px;
      cursor: pointer;
      box-shadow: 0 4px 20px rgba(29, 78, 216, 0.4);
      transition: all 0.3s ease;
      min-width: 220px;
      transition: opacity 0.4s ease, transform 0.3s ease;
    }
    #botonIniciar.visible {
      opacity: 1;
    }

    /* Responsive button en pantallas pequeñas */
    @media (max-width: 500px) {
      #botonIniciar {
        font-size: 1.1em;
        padding: 14px 24px;
        min-width: 180px;
      }
    }

    /* Aside (panel lateral) */
    aside {
      width: 100%;
      max-width: 320px;
      background: var(--bg-panel);
      border-left: 1px solid var(--border);
      padding: 24px;
      box-shadow: -4px 0 12px rgba(0,0,0,0.1);
      display: flex;
      flex-direction: column;
      gap: 24px;
    }

    @media (max-width: 900px) {
      aside {
        max-width: 90%;
        border-left: none;
        border-top: 1px solid var(--border);
        order: 1;
      }
      main {
        order: 0;
      }
    }

    .panel {
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 10px;
      background: rgba(30, 35, 55, 0.2);
    }

    .panel h3 {
      margin: 0 0 5px;
      font-size: 1em;
      color: var(--accent);
      font-weight: 600;
    }

    .status-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 8px 0;
      font-size: 0.9em;
    }

    .status-label {
      color: var(--text-light);
    }

    .status-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
    }

    .dot-pending { background: var(--warning); }
    .dot-ready { background: var(--success); }
    .dot-error { background: var(--danger); }

    .controls label {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 8px 0;
      font-size: 0.95em;
      color: var(--text-light);
    }

    .controls input[type="checkbox"] {
      accent-color: var(--accent);
      transform: scale(1.1);
    }

    #cuentaRegresiva, #cargando {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 5em;
      font-weight: bold;
      color: white;
      text-shadow: 0 0 10px rgba(0,0,0,0.8);
      z-index: 10;
    }

    #cuentaRegresiva {
      font-size: 5em;
    }

    @media (max-width: 500px) {
      #cuentaRegresiva {
        font-size: 4em;
      }
    }

    #cargando {
      font-size: 1.4em;
      background: rgba(0,0,0,0.7);
      padding: 20px 40px;
      border-radius: 15px;
    }

    #cronometro {
      position: absolute;
      top: 20px;
      left: 20px;
      background: rgba(10, 14, 23, 0.8);
      color: var(--accent);
      padding: 6px 10px;
      border-radius: 6px;
      font-size: 0.95em;
      font-weight: 600;
      z-index: 5;
      display: none;
    }

    #watermark {
      position: absolute;
      bottom: 15px;
      right: 15px;
      font-size: 16px;
      font-weight: bold;
      color: rgba(137, 180, 250, 0.25);
      pointer-events: none;
      z-index: 4;
      letter-spacing: 1px;
    }

    .overlay-box {
      position: absolute;
      border-radius: 14px;
      background: rgba(30, 30, 46, 0.92);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
      border: 1px solid rgba(137, 180, 250, 0.15);
      overflow: hidden;
    }

    .genero-box {
      right: clamp(8px, 3vw, 20px);
      left: auto;
      bottom: 20px;
      width: 140px;
      height: 40px;
      display: flex;
      align-items: center;
      padding: 0 16px;
    }

    .genero-box .label {
      font-size: 13px;
      color: #a6adc8;
    }

    .label-clinico {
      font-size: 12px;
    }

    .genero-box .value {
      font-size: 13px;
      font-weight: 600;
      margin-left: 6px;
    }

    .genero-masculino .value { color: #60a5fa; }
    .genero-femenino .value { color: #ec4899; }

    /* ✅ Por este bloque responsive */
    .estadisticas-box{
        left: clamp(8px, 3vw, 20px); 
       right: auto;
      bottom: clamp(8px, 3vw, 20px);
      width: clamp(180px, 44vw, 280px);
      height: clamp(140px, 30vw, 200px);
      padding: clamp(6px, 2vw, 10px);
    }

    /* Gráfico responsive */
    #graficoCanvas {
      width: 100% !important;
      height: 100% !important;
    }

    /* Panel de resumen clínico */
    .summary-clinical {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
      margin-top: 20px;
    }

    .summary-clinical .item {
      background: var(--bg-panel);
      border-radius: 12px;
      padding: 5px;
      border: 1px solid rgba(137, 180, 250, 0.15);
      display: flex;
      flex-direction: column;
      gap: 2px;
      text-align: center;
    }

    .summary-clinical .label {
      font-size: 0.9em;
      color: var(--text-light);
    }

    .summary-clinical .value {
      font-size: 1.0em;
      font-weight: 600;
      color: var(--text);
    }

    /* Responsive en móviles pequeños */
    @media (max-width: 400px) {
      .summary-clinical {
        grid-template-columns: 1fr;
        gap: 10px;
      }

      .genero-box {
        width: 160px;
        height: 50px;
        padding: 0 12px;
      }

      .genero-box .label, .genero-box .value {
        font-size: 12px;
      }

      .estadisticas-box {
        width: 240px;
        height: 180px;
      }
    }

 /* ===== SweetAlert2 – tema gris/plomo profesional ===== */
.swal2-popup.custom-swal{
  background:#EDF3FA;
  border:1px solid #e2e5ec;
  border-radius:14px;
  box-shadow:0 10px 30px rgba(27,31,41,.15);
  padding:1.25rem 1.25rem 1rem;
}
.custom-swal-title{color:#1f2937; font-weight:600; letter-spacing:.2px;}
.custom-swal-html{color:#495367; font-size:.95em;}
.custom-swal-actions{gap:12px;}

.custom-swal-confirm,
.custom-swal-cancel{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:10px; padding:.7rem 1.2rem;
  cursor:pointer; user-select:none;
  transition:transform .15s ease, box-shadow .15s ease, background .2s ease, border-color .2s ease;
}

/* Primario (azul sobrio) */
.custom-swal-confirm{
  background:#6f42c1; color:#fff; border:none;
  box-shadow:0 6px 12px rgba(43,108,176,.22);
}
.custom-swal-confirm:hover{ transform:translateY(-1px); box-shadow:0 8px 16px rgba(43,108,176,.30); }
.custom-swal-confirm:active{ transform:translateY(0); box-shadow:0 4px 10px rgba(43,108,176,.18); }

/* Secundario (gris/plomo) */
.custom-swal-cancel{
  background:#eef2f7; color:#1f2937; border:1px solid #d9dee8;
}
.custom-swal-cancel:hover{ background:#e6ebf3; border-color:#cfd6e3; transform:translateY(-1px); }
.custom-swal-cancel:active{ transform:translateY(0); }

/* Accesibilidad foco */
.custom-swal-confirm:focus-visible,
.custom-swal-cancel:focus-visible{
  outline:3px solid rgba(43,108,176,.35); outline-offset:2px;
}
@media (max-width:420px){
  .swal2-popup.custom-swal{ width:calc(100% - 28px) !important; }
}