/* Club Asistencia Core — Frontend PWA (profesor).
 * Mobile-first: pensado para un teléfono en la mano al pie de la cancha.
 * Misma paleta de colores por estado que assets/css/admin.css (ver
 * ca_core_get_estados_con_clase() en club-asistencia-core.php) para que el
 * profesor vea lo mismo en el celu que el admin ve en el panel.
 */

:root {
	--ca-bg:        #f8fafc;
	--ca-surface:   #ffffff;
	--ca-surface-2: #f1f5f9;
	--ca-border:    #e2e8f0;
	--ca-text:      #0f172a;
	--ca-text-dim:  #64748b;
	--ca-primary:   #0284c7;
	--ca-primary-d: #0277b3; /* un toque más oscuro que #0284c7: con texto blanco encima
	                            (botón "Ingresar", "Marcar todos Presente") da 4.89:1 de
	                            contraste — el original daba 4.10:1, por debajo del mínimo
	                            WCAG AA de 4.5:1 para texto normal. */
	--ca-danger:    #dc2626;
	--ca-success:   #16a34a;
	--ca-radius:    14px;
	--ca-text-dimmer: #94a3b8; /* aún más claro que --ca-text-dim, para datos secundarios como el N° de socio */

	/* Colores por estado — mismos que admin.css / export Excel. */
	--ca-p-bg: #d1fae5;  --ca-p-fg: #065f46;
	--ca-a-bg: #fee2e2;  --ca-a-fg: #991b1b;
	--ca-aa-bg:#ffedd5;  --ca-aa-fg:#9a3412;
	--ca-ed-bg:#fef3c7;  --ca-ed-fg:#92400e;
	--ca-l-bg: #e5e7eb;  --ca-l-fg: #374151;
	--ca-e-bg: #f3f4f6;  --ca-e-fg: #4b5563;
	--ca-par-bg:#dbeafe; --ca-par-fg:#1e40af;
	--ca-se-bg: #e5e7eb;  --ca-se-fg: #1f2937;
}

* { box-sizing: border-box; }

html, body {
	margin: 0;
	padding: 0;
	background: var(--ca-bg);
	color: var(--ca-text);
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	-webkit-tap-highlight-color: transparent;
	overscroll-behavior-y: contain;
}

body {
	min-height: 100vh;
	min-height: 100dvh;
	padding-bottom: env(safe-area-inset-bottom);
}

button, input, textarea, select { font-family: inherit; }

a { color: var(--ca-primary); }

/* ---------- Shell ---------- */
.ca-app {
	max-width: 560px;
	margin: 0 auto;
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
}

.ca-topbar {
	position: sticky;
	top: 0;
	z-index: 20;
	background: var(--ca-surface);
	border-bottom: 1px solid var(--ca-border);
	padding: calc(env(safe-area-inset-top) + 10px) 14px 10px;
}

.ca-topbar__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.ca-topbar__brand {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.ca-topbar__logo {
	flex-shrink: 0;
	width: 34px;
	height: 34px;
	border-radius: 9px;
	display: block;
}

.ca-topbar__titulos { min-width: 0; }

/* Título de la app: antes se confundía con el resto del texto del topbar
 * (mismo peso/tamaño casi que el nombre del profesor debajo). Ahora tiene
 * más tamaño, letter-spacing y el color primario para que se lea como
 * encabezado de la pantalla y no como un dato más. */
.ca-topbar__title {
	font-size: 19px;
	font-weight: 800;
	letter-spacing: -.01em;
	color: var(--ca-primary);
	margin: 0;
	line-height: 1.15;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ca-topbar__user  { font-size: 12.5px; color: var(--ca-text-dim); margin-top: 1px; }

.ca-icon-btn {
	background: none;
	border: none;
	color: var(--ca-text-dim);
	font-size: 19px;
	line-height: 1;
	padding: 8px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.ca-select {
	width: 100%;
	margin-top: 8px;
	background: var(--ca-surface-2);
	color: var(--ca-text);
	border: 1px solid var(--ca-border);
	border-radius: 10px;
	padding: 10px 12px;
	font-size: 15px;
	font-weight: 600;
}

/* ---------- Selector de fecha ---------- */
.ca-datebar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: 10px;
}
.ca-datebar__label {
	flex: 1;
	text-align: center;
	font-size: 14px;
	font-weight: 600;
	text-transform: capitalize;
}
.ca-datebar__btn {
	background: var(--ca-surface-2);
	border: 1px solid var(--ca-border);
	color: var(--ca-text);
	border-radius: 10px;
	width: 40px;
	height: 36px;
	font-size: 16px;
	cursor: pointer;
}
.ca-datebar__btn:disabled { opacity: .35; cursor: default; }

/* ---------- Banners ---------- */
.ca-banner {
	margin: 10px 14px 0;
	padding: 10px 12px;
	border-radius: 10px;
	font-size: 13px;
	line-height: 1.4;
	display: flex;
	align-items: flex-start;
	gap: 8px;
}
.ca-banner > i { flex-shrink: 0; font-size: 15px; line-height: 1.4; }
.ca-banner--warn   { background: #fef3c7; color: #92400e; }
.ca-banner--error  { background: #fee2e2; color: #991b1b; }
.ca-banner--info   { background: #dbeafe; color: #1e40af; }
.ca-banner--offline{ background: #f1f5f9; color: #334155; }

.ca-link-btn {
	background: none;
	border: none;
	color: inherit;
	text-decoration: underline;
	font: inherit;
	font-weight: 700;
	padding: 0;
	cursor: pointer;
}

/* ---------- Buscador + progreso + acciones rápidas ---------- */
.ca-toolbar {
	padding: 10px 14px 4px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.ca-search-wrap { position: relative; }
.ca-search-wrap .bi-search {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--ca-text-dim);
	font-size: 15px;
	pointer-events: none;
}
.ca-search {
	width: 100%;
	background: var(--ca-surface-2);
	border: 1px solid var(--ca-border);
	color: var(--ca-text);
	border-radius: 10px;
	padding: 10px 36px;
	font-size: 15px;
}
.ca-search::placeholder { color: var(--ca-text-dim); }
.ca-search-clear {
	position: absolute;
	right: 4px;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	color: var(--ca-text-dim);
	font-size: 16px;
	padding: 8px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ca-progress-row {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 12px;
	font-weight: 600;
	color: var(--ca-text);
}

/* Menú de acciones en lote ("Marcar todos Presente" / "Marcar el resto
 * Ausente"): antes eran dos botones a todo lo ancho debajo de la barra de
 * progreso, compitiendo por atención con cada fila. Ahora viven en un menú
 * colgante a la derecha de la barra — acciones poco frecuentes (una vez por
 * día como mucho), no hace falta que estén siempre a la vista. */
.ca-progress-menu-wrap { position: relative; flex-shrink: 0; }
.ca-progress-menu-btn {
	width: 30px;
	height: 30px;
	border-radius: 8px;
	background: var(--ca-surface-2);
	border: 1px solid var(--ca-border);
	color: var(--ca-text-dim);
	font-size: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.ca-progress-menu-btn:active { background: var(--ca-border); }
.ca-progress-menu-btn[aria-expanded="true"] {
	background: var(--ca-primary-d);
	border-color: var(--ca-primary-d);
	color: #fff;
}
.ca-progress-menu {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	z-index: 30;
	min-width: 224px;
	background: var(--ca-surface);
	border: 1px solid var(--ca-border);
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(15, 23, 42, .14);
	padding: 6px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.ca-progress-menu__item {
	width: 100%;
	text-align: left;
	background: none;
	border: none;
	border-radius: 8px;
	padding: 10px 10px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ca-text);
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
}
.ca-progress-menu__item:active { background: var(--ca-surface-2); }
.ca-progress-menu__item i { font-size: 15px; color: var(--ca-text-dim); }
/* Separador antes de "Marcar día sin entrenamiento": es una acción distinta
 * a las dos de arriba (esas completan lo que falta, esta sobrescribe TODO el
 * día), así que se separa visualmente para que no parezca una más del mismo
 * grupo. */
.ca-progress-menu__separador { height: 1px; background: var(--ca-border); margin: 4px 2px; }
.ca-progress-track {
	flex: 1;
	height: 6px;
	background: var(--ca-surface-2);
	border-radius: 999px;
	overflow: hidden;
}
.ca-progress-fill {
	height: 100%;
	background: var(--ca-primary);
	border-radius: 999px;
	transition: width .25s ease;
}

.ca-sync-pendientes {
	width: 100%;
	text-align: left;
	background: #fef3c7;
	color: #92400e;
	border: none;
	border-radius: 10px;
	padding: 9px 12px;
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
}
.ca-sync-pendientes:active { opacity: .85; }

/* ---------- Lista de deportistas ---------- */
.ca-lista {
	flex: 1;
	overflow-y: auto;
	padding: 6px 10px 24px;
}

.ca-fila {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--ca-surface);
	border: 1px solid var(--ca-border);
	border-radius: var(--ca-radius);
	padding: 10px 12px;
	margin: 6px 0;
	cursor: pointer;
	user-select: none;
}
.ca-fila:active { background: var(--ca-surface-2); }
.ca-fila--pendiente { box-shadow: inset 3px 0 0 var(--ca-primary); }

.ca-avatar {
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--ca-surface-2);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 700;
	color: var(--ca-text-dim);
}

.ca-fila__info { flex: 1; min-width: 0; }
.ca-fila__nombre {
	font-size: 15px;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ca-fila__socio { font-size: 11.5px; font-weight: 400; color: var(--ca-text-dim); }
.ca-fila__disciplina { color: var(--ca-text-dim); }
.ca-fila__socio-num, .ca-fila__meta-sep { color: var(--ca-text-dimmer); }

.ca-fila__quick {
	display: flex;
	gap: 6px;
	flex-shrink: 0;
}
.ca-quick-pill {
	width: 36px;
	height: 36px;
	border-radius: 9px;
	border: 1px solid var(--ca-border);
	background: var(--ca-surface-2);
	color: var(--ca-text-dim);
	font-size: 16px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
}
.ca-quick-pill:active { transform: scale(.94); }

.ca-badge-estado {
	flex-shrink: 0;
	min-width: 34px;
	text-align: center;
	padding: 5px 9px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	background: var(--ca-surface-2);
	color: var(--ca-text-dim);
	border: 1px dashed var(--ca-border);
}

/* Badge de estado "secundario" (ED, L, E, PAR, AA) al lado de las pills
 * rápidas ✓/✕ en la fila: mismo tamaño cuadrado que .ca-quick-pill (36x36,
 * radio 9px) para que no desentone al lado de ellas — antes era una
 * píldora angosta de texto que rompía la alineación de la fila. */
.ca-badge-estado--fila {
	min-width: 36px;
	width: 36px;
	height: 36px;
	padding: 0;
	border-radius: 9px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
}
.ca-badge-estado.ca-e-p   { background: var(--ca-p-bg);  color: var(--ca-p-fg);  border-style: solid; }
.ca-badge-estado.ca-e-a   { background: var(--ca-a-bg);  color: var(--ca-a-fg);  border-style: solid; }
.ca-badge-estado.ca-e-aa  { background: var(--ca-aa-bg); color: var(--ca-aa-fg); border-style: solid; }
.ca-badge-estado.ca-e-ed  { background: var(--ca-ed-bg); color: var(--ca-ed-fg); border-style: solid; }
.ca-badge-estado.ca-e-l   { background: var(--ca-l-bg);  color: var(--ca-l-fg);  border-style: solid; }
.ca-badge-estado.ca-e-e   { background: var(--ca-e-bg);  color: var(--ca-e-fg);  border-style: solid; }
.ca-badge-estado.ca-e-par { background: var(--ca-par-bg);color: var(--ca-par-fg);border-style: solid; }
.ca-badge-estado.ca-e-se  { background: var(--ca-se-bg); color: var(--ca-se-fg); border-style: solid; }

/* Indicador de estado único en la fila (reemplaza a las pills P/A una vez
 * marcado, cualquiera sea el estado): a diferencia del badge de solo-lectura
 * (un <div> decorativo), este es un <button> real — tocarlo quita la marca. */
.ca-badge-estado--tocable {
	cursor: pointer;
}
.ca-badge-estado--tocable:active { transform: scale(.94); }

.ca-sync-dot {
	flex-shrink: 0;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ca-text-dim);
}
.ca-sync-dot--pendiente { background: #fbbf24; }
.ca-sync-dot--error     { background: var(--ca-danger); }

.ca-vacio, .ca-cargando {
	text-align: center;
	color: var(--ca-text-dim);
	padding: 40px 20px;
	font-size: 14px;
}

/* ---------- Modal (picker de estado) ---------- */
.ca-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.55);
	display: flex;
	align-items: flex-end;
	z-index: 50;
}
.ca-modal-overlay[hidden] { display: none; }

.ca-modal {
	position: relative;
	width: 100%;
	max-width: 560px;
	margin: 0 auto;
	background: var(--ca-surface);
	border-radius: 20px 20px 0 0;
	padding: 16px 16px calc(env(safe-area-inset-bottom) + 16px);
	max-height: 85vh;
	overflow-y: auto;
}

.ca-modal__handle {
	width: 40px;
	height: 4px;
	background: var(--ca-border);
	border-radius: 999px;
	margin: 0 auto 12px;
}

/* Cerrar arriba a la derecha (patrón estándar de modal), en vez de solo
 * abajo entre los botones de acción: se ve y se alcanza con el pulgar
 * apenas se abre la hoja, sin tener que bajar la vista. */
.ca-modal__close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--ca-surface-2);
	border: none;
	color: var(--ca-text-dim);
	font-size: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.ca-modal__close:active { opacity: .8; }

/* Encabezado del modal: avatar + nombre, mismo patrón que la fila de la
 * lista (reutiliza .ca-avatar) para que quede claro de un vistazo A QUIÉN se
 * le está por marcar un estado — antes era solo una línea de texto en negrita
 * que se perdía contra el resto del contenido de la hoja. */
.ca-modal__header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 32px 16px 0; /* el margen derecho deja lugar al botón de cerrar */
}
.ca-modal__avatar {
	flex-shrink: 0;
	width: 46px;
	height: 46px;
	font-size: 15px;
}
.ca-modal__titulos { min-width: 0; }
.ca-modal__nombre {
	font-size: 18px;
	font-weight: 800;
	margin: 0 0 2px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ca-modal__socio { font-size: 12.5px; font-weight: 400; color: var(--ca-text-dim); margin: 0; }

/* Resumen de estado en modo solo-lectura: mismo look que el badge de la
 * lista (reutiliza .ca-badge-estado + .ca-e-p/.ca-e-a/etc.), pero un poco
 * más grande porque acá es el dato principal, no un adorno al costado. */
.ca-modal__estado-resumen {
	display: inline-flex;
	width: auto;
	min-width: 0;
	font-size: 14px;
	padding: 8px 16px;
	margin: 0 0 14px;
}

.ca-modal__nota-texto {
	font-size: 14px;
	line-height: 1.45;
	color: var(--ca-text);
	background: var(--ca-surface-2);
	border: 1px solid var(--ca-border);
	border-radius: 10px;
	padding: 10px 12px;
	margin: 0 0 10px;
	white-space: pre-wrap;
}

.ca-grid-estados {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
	margin-bottom: 12px;
}
.ca-btn-estado {
	border: none;
	border-radius: 12px;
	padding: 10px 4px;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	background: var(--ca-surface-2);
	color: var(--ca-text);
	border: 2px solid transparent;
}
.ca-btn-estado__sigla { font-size: 15px; }
.ca-btn-estado__nombre { font-size: 9.5px; font-weight: 500; opacity: .85; text-align: center; line-height: 1.15; }
.ca-btn-estado.ca-e-p   { background: var(--ca-p-bg);  color: var(--ca-p-fg); }
.ca-btn-estado.ca-e-a   { background: var(--ca-a-bg);  color: var(--ca-a-fg); }
.ca-btn-estado.ca-e-aa  { background: var(--ca-aa-bg); color: var(--ca-aa-fg); }
.ca-btn-estado.ca-e-ed  { background: var(--ca-ed-bg); color: var(--ca-ed-fg); }
.ca-btn-estado.ca-e-l   { background: var(--ca-l-bg);  color: var(--ca-l-fg); }
.ca-btn-estado.ca-e-e   { background: var(--ca-e-bg);  color: var(--ca-e-fg); }
.ca-btn-estado.ca-e-par { background: var(--ca-par-bg);color: var(--ca-par-fg); }
.ca-btn-estado.ca-e-se  { background: var(--ca-se-bg); color: var(--ca-se-fg); }
.ca-btn-estado--activo { border-color: var(--ca-text); box-shadow: 0 0 0 2px var(--ca-surface); }
/* Una vez elegido un estado, el resto se agrisa. Necesita las DOS clases en el
 * selector (.ca-btn-estado + --tenue) para igualar la especificidad de las
 * reglas .ca-btn-estado.ca-e-* de arriba — con una sola clase perdía siempre
 * contra ellas sin importar el orden en la hoja, así que nunca agrisaba nada. */
.ca-btn-estado.ca-btn-estado--tenue {
	background: var(--ca-surface-2);
	color: var(--ca-text-dim);
}
.ca-btn-estado.ca-btn-estado--tenue .ca-btn-estado__nombre { opacity: .6; }

.ca-modal__nota {
	width: 100%;
	background: var(--ca-surface-2);
	border: 1px solid var(--ca-border);
	color: var(--ca-text);
	border-radius: 10px;
	padding: 10px;
	font-size: 14px;
	min-height: 60px;
	margin-bottom: 10px;
	resize: vertical;
}
.ca-modal__nota-hint {
	font-size: 12.5px;
	color: var(--ca-text-dim);
	margin: 0 0 10px;
}
.ca-oculto { display: none !important; }

.ca-modal__acciones { display: flex; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.ca-btn {
	flex: 1;
	min-width: 0;
	border: none;
	border-radius: 10px;
	padding: 11px 6px;
	font-size: 13.5px;
	font-weight: 700;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	white-space: nowrap;
}
.ca-btn--ghost { background: var(--ca-surface-2); color: var(--ca-text); }
.ca-btn--danger { background: transparent; color: var(--ca-danger); }
/* "Agregar nota": botón claro con borde (no relleno oscuro) — el negro sólido
 * competía visualmente con "Guardar", que es la acción realmente primaria del
 * modal. Con este trato se ve tocable pero secundario, como corresponde. */
.ca-btn--claro { background: var(--ca-surface); color: var(--ca-primary-d); border: 1.5px solid var(--ca-border); }
/* "Guardar": mismo azul que ya se usaba para acciones primarias del modal. */
.ca-btn--primary { background: var(--ca-primary-d); color: #fff; }
/* Confirmar una acción que sobrescribe/descarta datos (ej. "Marcar día sin
 * entrenamiento" pisa las marcas de todo el grupo): relleno sólido en rojo,
 * a diferencia de .ca-btn--danger (que es solo texto, para "Quitar marca" —
 * una acción más chica y reversible con un tap). Acá conviene que pese más
 * visualmente porque el efecto es masivo. */
.ca-btn--peligro { background: var(--ca-danger); color: #fff; }
.ca-btn:active { opacity: .85; }

/* ---------- Modal de confirmación (reemplaza confirm() nativo) ---------- */
.ca-confirm-modal { max-width: 420px; }
.ca-confirm-titulo {
	font-size: 17px;
	font-weight: 800;
	margin: 4px 0 8px;
	padding-right: 8px;
}
.ca-confirm-mensaje {
	font-size: 14px;
	line-height: 1.5;
	color: var(--ca-text-dim);
	margin: 0 0 18px;
}

/* ---------- Toast ---------- */
.ca-toast {
	position: fixed;
	left: 50%;
	bottom: calc(env(safe-area-inset-bottom) + 16px);
	transform: translateX(-50%) translateY(20px);
	background: #111827;
	color: #fff;
	padding: 10px 16px;
	border-radius: 999px;
	font-size: 13px;
	box-shadow: 0 6px 20px rgba(0,0,0,.4);
	z-index: 60;
	opacity: 0;
	transition: opacity .2s ease, transform .2s ease;
	pointer-events: none;
}
.ca-toast--visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Pantallas de estado global (login incluido) ---------- */
.ca-pantalla-centrada {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 32px 24px;
	text-align: center;
	gap: 12px;
}
.ca-pantalla-centrada h1 { font-size: 18px; margin: 0; }
.ca-pantalla-centrada p { color: var(--ca-text-dim); font-size: 14px; margin: 0; max-width: 320px; }

.ca-spinner {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 3px solid var(--ca-border);
	border-top-color: var(--ca-primary);
	animation: ca-spin 0.7s linear infinite;
}
@keyframes ca-spin { to { transform: rotate(360deg); } }

/* ---------- Login ---------- */
.ca-login {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 32px 28px;
	gap: 18px;
}
.ca-login__logo {
	width: 56px;
	height: 56px;
	border-radius: 16px;
	background: var(--ca-primary-d);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	margin: 0 auto 4px;
}
/* Variante --img: cuando el admin subió un escudo (ca_core_tiene_escudo()),
 * el login lo muestra en lugar del emoji. Cambia dos cosas respecto al
 * default: 1) tamaño más grande (72px) porque un logo real merece más
 * presencia que un emoji genérico; 2) sin fondo azul sólido y sin
 * border-radius chico — el fondo puede pisar la identidad del escudo si
 * este ya tiene un fondo propio, y un rectángulo con esquinas 16px queda
 * raro alrededor de escudos circulares. object-fit: contain preserva el
 * aspect ratio si el escudo no es perfectamente cuadrado. */
.ca-login__logo--img {
	width: 72px;
	height: 72px;
	background: transparent;
	border-radius: 0;
	padding: 0;
}
.ca-login__logo--img img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}
.ca-login h1 { text-align: center; font-size: 20px; margin: 0; }
.ca-login p.ca-sub { text-align: center; color: var(--ca-text-dim); font-size: 13px; margin: 0 0 8px; }

.ca-field-label { font-size: 13px; color: var(--ca-text-dim); margin-bottom: 4px; display: block; }
.ca-input {
	width: 100%;
	background: var(--ca-surface-2);
	border: 1px solid var(--ca-border);
	color: var(--ca-text);
	border-radius: 10px;
	padding: 12px;
	font-size: 15px;
	margin-bottom: 14px;
}
.ca-check-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ca-text-dim); margin-bottom: 16px; }

.ca-btn-login {
	width: 100%;
	background: var(--ca-primary-d);
	color: #fff;
	border: none;
	border-radius: 10px;
	padding: 14px;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
}
.ca-login__olvide {
	text-align: center;
	margin: 14px 0 0;
	font-size: 13px;
}

/* ---------- Foco visible (teclado / lector de pantalla) ----------
 * El tema oscuro y los bordes propios de cada componente pueden tapar el
 * outline por defecto del navegador; se define uno explícito y consistente
 * en vez de depender de que cada browser lo resuelva bien solo. Se usa
 * :focus-visible (no :focus a secas) para no mostrar el anillo en un tap
 * táctil normal, solo cuando la navegación es por teclado.
 */
.ca-fila:focus-visible,
.ca-quick-pill:focus-visible,
.ca-badge-estado--tocable:focus-visible,
.ca-btn-estado:focus-visible,
.ca-icon-btn:focus-visible,
.ca-datebar__btn:focus-visible,
.ca-btn:focus-visible,
.ca-progress-menu-btn:focus-visible,
.ca-progress-menu__item:focus-visible,
.ca-btn-login:focus-visible,
.ca-search:focus-visible,
.ca-search-clear:focus-visible,
.ca-modal__close:focus-visible,
.ca-input:focus-visible,
.ca-select:focus-visible,
.ca-link-btn:focus-visible {
	outline: 2px solid var(--ca-primary);
	outline-offset: 2px;
}