/* Campos con tema oscuro, para TODO el sitio (24/10/2026).
   Antes, cualquier input / select / textarea sin clase propia salia con el
   fondo blanco del navegador y letra clara (ilegible). Esta hoja da la base.
   Todo va dentro de :where(), que tiene especificidad 0: cualquier regla
   propia de una pagina (.campo, .chat-caja, .t-area...) sigue ganando. */

:where(html){color-scheme:dark}

:where(input:not([type=checkbox],[type=radio],[type=range],[type=file],[type=color],
  [type=button],[type=submit],[type=reset],[type=hidden],[type=image]),select,textarea){
  background-color:#1d163f;color:#ede9fe;
  border:1px solid #2c2257;border-radius:10px;
  padding:9px 11px;font:inherit;line-height:1.35;outline:0;
  transition:border-color .15s,box-shadow .15s;
}
:where(textarea){resize:vertical;min-height:72px}
:where(select){cursor:pointer;-webkit-appearance:none;appearance:none}
/* La flecha va con especificidad normal para ganarle a los "background:" abreviados de cada pagina */
select:not([multiple]):not([size]){
  padding-right:30px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23a78bfa' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;background-size:12px 8px;
}
:where(select[multiple],select[size]:not([size="1"])){cursor:default}
:where(option,optgroup){background-color:#1d163f;color:#ede9fe}

:where(input,select,textarea)::placeholder{color:#857bae;opacity:1}
:where(input:not([type=checkbox],[type=radio],[type=range],[type=file],[type=color],
  [type=button],[type=submit],[type=reset],[type=hidden],[type=image]),select,textarea):hover{
  border-color:#3e3177;
}
:where(input:not([type=checkbox],[type=radio],[type=range],[type=file],[type=color],
  [type=button],[type=submit],[type=reset],[type=hidden],[type=image]),select,textarea):focus{
  border-color:#8b5cf6;box-shadow:0 0 0 3px rgba(139,92,246,.22);
}
:where(input,select,textarea):disabled{opacity:.55;cursor:not-allowed}
:where(input[readonly]){color:#bcb2df}

/* Casillas, botones de opcion y barras: color de la marca */
:where(input[type=checkbox],input[type=radio],input[type=range],progress){accent-color:#8b5cf6}

/* Boton "Elegir archivo" */
:where(input[type=file]){color:#bcb2df;font:inherit;max-width:100%}
:where(input[type=file])::file-selector-button{
  background:#1d163f;color:#ede9fe;border:1px solid #3e3177;border-radius:9px;
  padding:7px 12px;margin-right:10px;font:inherit;font-weight:650;cursor:pointer;
}
:where(input[type=file])::file-selector-button:hover{border-color:#8b5cf6}
:where(input[type=color]){background:#1d163f;border:1px solid #2c2257;border-radius:8px;padding:2px;cursor:pointer}

/* Fechas y horas: iconos claros sobre fondo oscuro */
:where(input[type=date],input[type=time],input[type=datetime-local],input[type=month],input[type=week])::-webkit-calendar-picker-indicator{
  filter:invert(.8);cursor:pointer;
}

/* Autocompletado del navegador: que no lo pinte de blanco/amarillo */
:where(input,select,textarea):-webkit-autofill{
  -webkit-text-fill-color:#ede9fe;caret-color:#ede9fe;
  box-shadow:0 0 0 100px #1d163f inset;
}