/* @version 1.10.0 - 2026-09-20
 *
 * S153 — EL CAMPO DE TELÉFONO CON SU PAÍS, VESTIDO COMO EL PLUGIN.
 *
 * La librería trae su propio aspecto, pensado para una web clara: la lista en
 * blanco y el nombre del país en gris flojo. Dentro del panel, que va en modo
 * oscuro, eso se lee mal y desentona. Aquí se le pone la ropa del plugin con
 * sus propios colores (--ej-*), así que vale igual en claro y en oscuro sin
 * escribir dos veces lo mismo.
 */

/* El campo, del ancho del hueco donde esté, como cualquier otro. */
.iti {
	width: 100%;
}

.iti__tel-input,
.iti input[type="tel"] {
	width: 100%;
}

/* El campo que se ve y se escribe. Va con su propia clase y no con la del
   campo original, para no confundir a lo que busca el teléfono por su clase
   (ver el comentario largo en `assets/js/esamjudo-tel.js`), así que aquí se le
   da el mismo aspecto que a cualquier otro campo del plugin. */
.ej-tel-visible {
	width: 100%;
	background: var(--ej-input-bg, var(--ej-surface-2, #fff));
	color: var(--ej-text, #1d2433);
	border: 1px solid var(--ej-border, #e2e6ee);
	border-radius: 6px;
	font-family: inherit;
	font-size: .95rem;
	min-height: 40px;
}

.ej-tel-visible:focus {
	outline: none;
	border-color: var(--ej-primary, #2c6390);
	box-shadow: 0 0 0 3px rgba(44, 99, 144, .18);
}

/* 🔴 El aviso del teléfono que se guardó sin país. VA CON EL COLOR DE AVISO del
   plugin, el mismo ámbar que el resto de cosas que hay que atender: en gris
   flojo «no destaca» (cliente, 20/09/2026) y pasaba desapercibido justo en la
   tarjeta, que es donde tiene que verse antes de entrar a editar.

   Sale en dos sitios y con dos etiquetas —un párrafo bajo el campo y, en la
   tarjeta de solo lectura, un `span` dentro del dato—, así que ocupa su propia
   línea en los dos casos. Los tokens son los del aviso del área y los del
   panel, así que se ve igual de bien en claro y en oscuro. */
.ej-tel-sin-pais {
	display: block;
	margin: .5rem 0 0;
	padding: 8px 12px;
	border-radius: 8px;
	background: var(--ej-warning-bg, #fef3e2);
	color: var(--ej-warning-fg, #92620a);
	font-size: .82rem;
	font-weight: 600;
	line-height: 1.35;
}

/* La bandera y el prefijo de la izquierda. */
.iti__selected-country {
	background: transparent;
	border-radius: 6px 0 0 6px;
}

.iti__selected-country:hover,
.iti__selected-country:focus {
	background: var(--ej-surface-2, rgba(0, 0, 0, .05));
}

.iti__selected-dial-code {
	color: var(--ej-text, #1d2433);
}

.iti__arrow {
	border-top-color: var(--ej-muted, #6b7385);
}

/* La lista, por encima de todo: la ficha del alumno se abre en una capa muy
   alta y con el valor de la librería (1060) quedaba por debajo, sin verse. */
.iti--container {
	z-index: 200000;
}

/* La lista de países. */
.iti__dropdown-content {
	/* 🔴 El fondo va con `--ej-card-bg`, que es el token que existe de verdad.
	   Con `--ej-surface` —que no existe en el plugin— caía en el blanco de
	   respaldo y la lista salía en blanco con el texto claro encima: no se leía
	   nada salvo la fila marcada. Visto en pantalla el 20/09/2026. */
	background: var(--ej-card-bg, var(--ej-surface-2, #fff));
	border: 1px solid var(--ej-border, #e2e6ee);
	border-radius: 8px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
	/* Ancha de verdad: con el ancho del campo, el buscador y los nombres
	   largos salían cortados («Buscar país o prefij»). */
	min-width: 320px;
}

/* Hacia dónde crece la lista lo decide el JS mirando si cabe en la pantalla
   (ver `assets/js/esamjudo-tel.js`): de normal se abre hacia la derecha, y
   solo cuando no cabe se le da la vuelta. Forzarlo siempre a un lado rompía
   el otro. */
.iti__dropdown-content.ej-tel-lista--hacia-la-izquierda {
	left: auto;
	right: 0;
}

.iti__search-input {
	background: var(--ej-surface-2, #f0f3f9);
	color: var(--ej-text, #1d2433);
	border: 0;
	border-bottom: 1px solid var(--ej-border, #e2e6ee);
	border-radius: 8px 8px 0 0;
	padding: 10px 12px;
	font-size: .9rem;
}

.iti__search-input::placeholder {
	color: var(--ej-muted, #6b7385);
}

.iti__country {
	padding: 8px 12px;
	color: var(--ej-text, #1d2433);
}

/* El nombre del país es lo que se lee, así que va con el color del texto
   normal y no con el gris apagado de la librería; el prefijo, en segundo
   plano, que es el dato de apoyo. */
.iti__country-name {
	color: var(--ej-text, #1d2433);
}

.iti__dial-code {
	color: var(--ej-muted, #6b7385);
}

.iti__country.iti__highlight,
.iti__country:hover {
	background: var(--ej-surface-3, #f7f9fc);
}

.iti__country.iti__highlight .iti__country-name,
.iti__country:hover .iti__country-name {
	color: var(--ej-text, #1d2433);
}

/* El separador entre los países de arriba (los preferidos) y el resto. */
.iti__divider {
	border-bottom-color: var(--ej-border, #e2e6ee);
}

/* En modo oscuro las banderas se despegan del fondo con un borde tenue. */
.esamjudo-cat[data-theme="dark"] .iti__flag {
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .12);
}