/* clave.css - campos de clave de la parte publica (11/11/2026). Va con js/clave.js. */

/* El ojo va DENTRO del campo, a la derecha: asi en el movil el campo no se estrecha. */
.clave-caja { position: relative; display: block; max-width: 400px; }
.clave-caja input { width: 100%; padding-right: 48px; }
.clave-ojo {
	position: absolute; top: 0; right: 0; bottom: 0; width: 44px;
	border: 0; background: transparent; cursor: pointer;
	font-size: 18px; line-height: 1; color: #444; padding: 0;
}
/* Viendo la clave, el ojo sale tachado. */
.clave-ojo.visto::after {
	content: ""; position: absolute; left: 11px; right: 11px; top: 50%;
	border-top: 2px solid #c0392b; transform: rotate(-40deg);
}

/* Recuadro de las reglas: una regla por linea, hacia abajo, para que nunca se salga por la derecha. */
.clave-reglas {
	max-width: 400px; margin: 6px 0 12px; padding: 8px 10px;
	background: #fff; border: 1px solid #ddd; border-radius: 8px; font-size: 14px; line-height: 1.5;
}
.clave-reglas .titulo { font-weight: bold; color: #333; margin-bottom: 2px; }
.clave-reglas ul { list-style: none; margin: 0; padding: 0; }
.clave-reglas li { color: #888; }
.clave-reglas li.si { color: #1a8a34; }
.clave-reglas li.no { color: #c0392b; }
.clave-reglas .marca { display: inline-block; width: 1.1em; font-weight: bold; }

/* "Cambiar mi clave": los campos salen escondidos y se despliegan al pulsar. */
.cambiar-clave { margin: 14px 0 18px; }
.cambiar-clave > summary {
	display: inline-block; cursor: pointer; list-style: none;
	padding: 8px 16px; border: 1px solid #f17945; border-radius: 8px;
	background: #fff; color: #c4521f; font-weight: bold;
}
.cambiar-clave > summary::-webkit-details-marker { display: none; }
.cambiar-clave > summary::before { content: "\25B8  "; }
.cambiar-clave[open] > summary::before { content: "\25BE  "; }
.cambiar-clave .dentro { margin-top: 12px; }
.cambiar-clave .nota { color: #555; margin-bottom: 10px; }

/* Movil: el recuadro gris de "Datos del cliente" tenia 30 px de relleno por cada lado y,
   sumado al margen de la pagina, los campos se quedaban estrechos. Se reduce solo en movil. */
@media (max-width: 576px) {
	.caja-datos { padding: 16px 12px !important; }
	.clave-caja, .clave-reglas { max-width: none; }
}