@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

:root { color-scheme: light dark; }
body { font-family:'Inter',sans-serif; background:#f8f9fa; color:#212529; }

.modal-content.modal-open { transform:scale(1); opacity:1; }
.candidate-photo{width:100px;height:100px;object-fit:cover;object-position:center top;border:4px solid #dee2e6;background:#fff;border-radius:50%}
.modal-photo{width:128px;height:128px;object-fit:cover;object-position:center top;border:8px solid #dee2e6;background:#fff;border-radius:50%}
.modal-section{margin-bottom:1.5rem}
.modal-section h3{font-size:1.25rem;font-weight:600;color:#0056b3;margin-bottom:.75rem;border-bottom:2px solid #e0e0e0;padding-bottom:.25rem}
#modal-contras-list li{padding-bottom:1rem;margin-bottom:1rem;border-bottom:1px solid #e5e7eb}
#modal-contras-list li:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}

.video-responsive-container{position:relative;overflow:hidden;width:100%;padding-top:56.25%}
.video-responsive-container iframe{position:absolute;inset:0;width:100%;height:100%}

/* Overrides modo oscuro */
.dark body{background:#0b1220;color:#e5e7eb}
.dark .candidate-card{background:#0f172a;border-color:#334155;color:#e5e7eb}
.dark .modal-content{background:#0b1220;color:#e5e7eb}
.dark .modal-section h3{color:#93c5fd;border-color:#1f2937}
.dark #modal-contras-container{background:#2b0e0e;border-color:#ef4444;color:#fecaca}
.dark footer{border-color:#334155}
.dark a{color:#93c5fd}
.dark .video-responsive-container{border-color:#334155}
.dark .text-gray-900{color:#e5e7eb !important}
.dark .text-gray-700{color:#cbd5e1 !important}
.dark .text-gray-600,.dark .text-gray-500{color:#94a3b8 !important}
.dark .bg-white{background:#0f172a !important}
.dark .bg-gray-50{background:#111827 !important}
.dark .border-gray-200{border-color:#334155 !important}
.dark .border-gray-300{border-color:#475569 !important}

#theme-toggle{backdrop-filter:saturate(1.2) blur(4px)}

  /* anula cualquier ring/outline heredado */
  --tw-ring-color: transparent !important;
  --tw-ring-shadow: 0 0 #0000 !important;
  --tw-shadow: 0 0 #0000 !important;
  outline: none !important;
}

/* inputs/textarea internos */
.dark .caja-coment input,
.dark .caja-coment textarea{
  background:#0a0f1a !important;
  color:#e5e7eb !important;
  border:1px solid #111827 !important;
  box-shadow:none !important;
  --tw-ring-color: transparent !important;
  --tw-ring-shadow: 0 0 #0000 !important;
  outline:none !important;
}

/* foco discreto (sin halo blanco) */
.dark .caja-coment input:focus,
.dark .caja-coment textarea:focus{
  border-color:#6366f1 !important;               /* indigo-500 */
  box-shadow:0 0 0 3px rgba(99,102,241,.2) !important;
  --tw-ring-color: transparent !important;
}

/* por si alguna clase global aplica ring u outline */
.dark .caja-coment *:focus { outline: none !important; }
.dark .caja-coment .ring-1,
.dark .caja-coment .ring-2,
.dark .caja-coment .ring,
.dark .caja-coment [class*="ring-"]{
  --tw-ring-color: transparent !important;
  --tw-ring-shadow: 0 0 #0000 !important;
  box-shadow:none !important;
}

/* quita halo blanco si usas gradient-borders */
.dark .caja-coment.item-coment{
  background:#0e1726 !important;
  border:1px solid #111827 !important;
  background-image:none !important; /* elimina gradiente del borde */
}
/* Mismo color que el texto del input */
.caja-coment{ --comment-fg: #111827; }           /* claro */
.dark .caja-coment{ --comment-fg: #e5e7eb; }     /* oscuro */
.caja-coment .titulo-comentarios{
  color: var(--comment-fg) !important;
}