/* Componentes compartidos: tarjeta, campos, botones, mensajes y pestañas.
   Pensado primero para el celular: campos de 16 px (evita el zoom de iOS) y toques de al menos 44 px.
   Dirección «Hoja de carpeta» (11/10/2026): la tarjeta es una HOJA con el margen rojo a la izquierda, los controles tienen esquinas de 6 px y lo elegido o enfocado va en el color del texto (--acento), siempre con algo que no es color. */

.tarjeta {
    background: var(--blanco);
    border: 1px solid var(--borde);
    border-left: var(--grosor-margen) solid var(--margen);
    border-radius: var(--radio);
    padding: 1.5rem;
}

.campo { display: grid; gap: .375rem; margin-bottom: 1rem; }

.campo label, .campo .etiqueta { font-weight: 700; }

.campo input[type="text"],
.campo input[type="email"],
.campo input[type="password"],
.campo input[type="datetime-local"] {
    width: 100%;
    min-height: 48px;
    padding: .625rem .875rem;
    font: inherit;
    font-size: 1rem;
    color: var(--negro);
    background: var(--blanco);
    border: 2px solid var(--borde-fuerte);
    border-radius: var(--radio-campo);
}

.campo textarea {
    width: 100%;
    min-height: 120px;
    padding: .625rem .875rem;
    font: inherit;
    font-size: 1rem;
    color: var(--negro);
    background: var(--blanco);
    border: 2px solid var(--borde-fuerte);
    border-radius: var(--radio-campo);
    resize: vertical;
}

.campo select {
    width: 100%;
    min-height: 48px;
    padding: .625rem .875rem;
    font: inherit;
    font-size: 1rem;
    color: var(--negro);
    background: var(--blanco);
    border: 2px solid var(--borde-fuerte);
    border-radius: var(--radio-campo);
}
.campo select:disabled, .campo input:disabled { background: var(--fondo); color: var(--texto-suave); }

.campo input[aria-invalid="true"], .campo select[aria-invalid="true"] { border-color: var(--error); }

.ayuda { color: var(--texto-suave); font-size: .9rem; }

fieldset.campo { border: 0; padding: 0; min-width: 0; }
fieldset.campo legend { padding: 0; margin-bottom: .5rem; }

.casilla { display: flex; gap: .75rem; align-items: flex-start; margin-bottom: 1rem; }
.casilla input[type="checkbox"], .casilla input[type="radio"] { width: 1.5rem; height: 1.5rem; margin: .125rem 0 0; flex: none; accent-color: var(--acento); }
.casilla label { font-weight: 400; }

.boton {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 48px; padding: .625rem 1.25rem;
    font: inherit; font-weight: 800; font-size: 1rem;
    color: var(--sobre-accion); background: var(--accion);
    border: 2px solid var(--accion); border-radius: var(--radio-control);
    cursor: pointer; text-decoration: none;
}
.boton:hover { background: var(--boton-hover); }
.boton:disabled { opacity: .6; cursor: not-allowed; }
.boton--ancho { width: 100%; }
.boton--peligro { color: var(--blanco); background: var(--error); border-color: var(--error); }
.boton--peligro:hover { background: var(--peligro-hover); }
.boton--secundario { color: var(--negro); background: transparent; border-color: var(--negro); }
.boton--secundario:hover { background: var(--boton-secundario-hover); }

.mensaje {
    min-height: 0;
    margin: 0 0 1rem;
    padding: 0;
    border-radius: var(--radio-campo);
    font-weight: 700;
}
/* Un mensaje es una hoja chica: el mismo margen grueso a la izquierda, con el color del mensaje */
.mensaje:not(:empty) { padding: .75rem 1rem; color: var(--error); background: var(--error-fondo); border: 1px solid var(--error); border-left-width: var(--grosor-margen); }
.mensaje.es-exito:not(:empty) { color: var(--exito); background: var(--exito-fondo); border-color: var(--exito); }
.mensaje.es-aviso:not(:empty) { color: var(--aviso); background: var(--aviso-fondo); border-color: var(--aviso); }

.pestanas { display: flex; gap: .25rem; border-bottom: 2px solid var(--borde); margin: -.25rem 0 1.25rem; }      /* las pestañas son solapas de carpeta */
.pestana {
    flex: 1; min-height: 48px; padding: .5rem 1rem;
    font: inherit; font-weight: 800; font-size: 1rem; color: var(--texto-suave);
    background: transparent; border: 0; border-bottom: 4px solid transparent; margin-bottom: -2px;
    cursor: pointer;
}
.pestana { border-radius: var(--radio-campo) var(--radio-campo) 0 0; }
.pestana[aria-selected="true"] { color: var(--sobre-resalte); background: var(--resalte); border-bottom-color: var(--acento); }