/* =============================================================================
   Escuela PIB 2 — Componentes UI
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Botones
   ----------------------------------------------------------------------------- */
.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--espacio-2);
    padding: var(--espacio-2) var(--espacio-5);
    min-height: var(--alto-tactil);
    font-family: inherit;
    font-size: var(--tamano-texto-base);
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--radio-md);
    cursor: pointer;
    user-select: none;
    transition: background-color var(--transicion-rapida),
                color var(--transicion-rapida),
                border-color var(--transicion-rapida),
                transform var(--transicion-rapida),
                box-shadow var(--transicion-rapida);
    white-space: nowrap;
}

.boton:active {
    transform: translateY(1px);
}

.boton--primario {
    background-color: var(--color-cacao);
    color: var(--color-blanco);
    border-color: var(--color-cacao);
}
.boton--primario:hover {
    background-color: var(--color-marron-profundo);
    border-color: var(--color-marron-profundo);
    color: var(--color-blanco);
    text-decoration: none;
}

.boton--secundario {
    background-color: transparent;
    color: var(--color-marron-profundo);
    border-color: var(--color-madera-media);
}
.boton--secundario:hover {
    background-color: var(--color-beige);
    color: var(--color-marron-profundo);
    text-decoration: none;
}

.boton--fantasma {
    background-color: var(--color-superficie-alt);
    color: var(--color-texto);
    border-color: var(--color-borde);
}
.boton--fantasma:hover {
    background-color: var(--color-beige);
    text-decoration: none;
}

.boton--texto {
    background-color: transparent;
    color: var(--color-enlace);
    border-color: transparent;
    padding: var(--espacio-1) var(--espacio-2);
    min-height: auto;
    text-decoration: none;
}
.boton--texto:hover {
    color: var(--color-enlace-hover);
    text-decoration: underline;
}

.boton--peligro {
    background-color: var(--color-error);
    color: var(--color-blanco);
    border-color: var(--color-error);
}
.boton--peligro:hover {
    background-color: var(--color-peligro);
    border-color: var(--color-peligro);
    color: var(--color-blanco);
}

.boton--exito {
    background-color: var(--color-exito);
    color: var(--color-blanco);
    border-color: var(--color-exito);
}
.boton--exito:hover {
    background-color: var(--color-oliva-oscuro);
    border-color: var(--color-oliva-oscuro);
    color: var(--color-blanco);
}

.boton--grande {
    min-height: 52px;
    padding: var(--espacio-3) var(--espacio-6);
    font-size: var(--tamano-texto-md);
}

.boton--pequeno {
    min-height: 36px;
    padding: var(--espacio-1) var(--espacio-3);
    font-size: var(--tamano-texto-sm);
}

.boton--bloque {
    display: flex;
    width: 100%;
}

.boton:disabled,
.boton[aria-busy="true"] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.boton--cargando .boton__texto {
    visibility: hidden;
}

.boton__cargador {
    position: absolute;
    width: 18px;
    height: 18px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: var(--radio-completo);
    animation: boton-cargando 0.7s linear infinite;
}
.boton {
    position: relative;
}

@keyframes boton-cargando {
    to { transform: rotate(360deg); }
}

.boton-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--alto-tactil);
    height: var(--alto-tactil);
    background-color: transparent;
    color: var(--color-texto);
    border: 1px solid transparent;
    border-radius: var(--radio-md);
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--transicion-rapida);
}
.boton-icono:hover {
    background-color: var(--color-beige);
    color: var(--color-texto);
    text-decoration: none;
}

/* -----------------------------------------------------------------------------
   BEM .boton--icono (modificador de .boton).
   Conserva color y fondo del modificador padre (.boton--fantasma/.boton--primario
   /.boton--secundario) y solo aplica el tamaño cuadrado. No resetea bg/color.
   ----------------------------------------------------------------------------- */
.boton--icono {
    width: var(--alto-tactil);
    height: var(--alto-tactil);
    padding: 0;
    min-height: auto;
    flex-shrink: 0;
}
.boton--icono.boton--pequeno {
    width: 36px;
    height: 36px;
}

/* -----------------------------------------------------------------------------
   Campos de formulario
   ----------------------------------------------------------------------------- */
.campo {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-1);
    margin-bottom: var(--espacio-4);
}

.campo__etiqueta {
    font-weight: 500;
    color: var(--color-texto);
    font-size: var(--tamano-texto-sm);
}

.campo__obligatorio {
    color: var(--color-error);
    margin-left: 2px;
}

.campo input[type="text"],
.campo input[type="email"],
.campo input[type="password"],
.campo input[type="number"],
.campo input[type="tel"],
.campo input[type="url"],
.campo input[type="search"],
.campo input[type="date"],
.campo input[type="time"],
.campo input[type="datetime-local"],
.campo input[type="file"],
.campo textarea,
.campo select {
    width: 100%;
    padding: var(--espacio-2) var(--espacio-3);
    min-height: var(--alto-tactil);
    font-family: inherit;
    font-size: var(--tamano-texto-base);
    line-height: var(--altura-linea-base);
    color: var(--color-texto);
    background-color: var(--color-superficie);
    border: 1px solid var(--color-borde-fuerte);
    border-radius: var(--radio-md);
    transition: border-color var(--transicion-rapida),
                box-shadow var(--transicion-rapida);
}

.campo input:focus,
.campo textarea:focus,
.campo select:focus {
    border-color: var(--color-cacao);
    box-shadow: 0 0 0 3px rgba(140, 94, 60, 0.15);
    outline: none;
}

/* Inputs de fecha/hora: estilo premium consistente con design system.
   Los inputs nativos del browser (datetime-local, date, time) tienen
   un look minimalista que desentona con el resto del formulario.
   Estos overrides les dan borde, padding, focus y un poco de color. */
.campo input[type="date"],
.campo input[type="time"],
.campo input[type="datetime-local"] {
    font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, 'Courier New', monospace;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    color: var(--color-marron-profundo, #3A2E1F);
    background-color: var(--color-crema, #F7F3E9);
    border: 1.5px solid var(--color-borde-fuerte, #C9BBA0);
    border-radius: var(--radio-md, 8px);
    padding: 10px 14px;
    cursor: pointer;
    transition: all 0.15s ease;
    min-height: 44px;
    font-weight: 500;
    color-scheme: light;
}
.campo input[type="date"]:hover,
.campo input[type="time"]:hover,
.campo input[type="datetime-local"]:hover {
    border-color: var(--color-cacao, #8C5E3C);
    background-color: var(--color-superficie, #FFFFFF);
}
.campo input[type="date"]:focus,
.campo input[type="time"]:focus,
.campo input[type="datetime-local"]:focus {
    border-color: var(--color-cacao, #8C5E3C);
    background-color: var(--color-superficie, #FFFFFF);
    box-shadow: 0 0 0 3px rgba(140, 94, 60, 0.18);
    outline: none;
}
/* Cuando el input tiene valor, se ve "lleno" (no vacio) */
.campo input[type="date"]:not(:placeholder-shown),
.campo input[type="time"]:not(:placeholder-shown),
.campo input[type="datetime-local"]:not(:placeholder-shown) {
    color: var(--color-texto, #1f2937);
    background-color: var(--color-superficie, #FFFFFF);
    border-color: var(--color-cacao, #8C5E3C);
    font-weight: 600;
}
/* Icono de calendario en el focus: el browser lo agrega solo,
   aca ajustamos su color para que combine con cacao */
.campo input[type="date"]::-webkit-calendar-picker-indicator,
.campo input[type="time"]::-webkit-calendar-picker-indicator,
.campo input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    filter: invert(36%) sepia(28%) saturate(1100%) hue-rotate(354deg) brightness(95%) contrast(88%);
    opacity: 0.75;
    transition: opacity 0.15s;
}
.campo input[type="date"]:hover::-webkit-calendar-picker-indicator,
.campo input[type="time"]:hover::-webkit-calendar-picker-indicator,
.campo input[type="datetime-local"]:hover::-webkit-calendar-picker-indicator,
.campo input[type="date"]:focus::-webkit-calendar-picker-indicator,
.campo input[type="time"]:focus::-webkit-calendar-picker-indicator,
.campo input[type="datetime-local"]:focus::-webkit-calendar-picker-indicator {
    opacity: 1;
}
/* Layout de dos fechas lado a lado (apertura + cierre) en formularios
   de evaluaciones/encuestas: que se vean balanceadas. */
.campo--fecha-par input[type="datetime-local"] {
    max-width: 260px;
}

.campo textarea {
    min-height: 100px;
    resize: vertical;
}

.campo__ayuda {
    margin: 0;
    font-size: var(--tamano-texto-sm);
    color: var(--color-texto-secundario);
}

.campo__error {
    margin: 0;
    font-size: var(--tamano-texto-sm);
    color: var(--color-error);
    font-weight: 500;
}

.campo--error input,
.campo--error textarea,
.campo--error select {
    border-color: var(--color-error);
}
.campo--error input:focus,
.campo--error textarea:focus,
.campo--error select:focus {
    box-shadow: 0 0 0 3px rgba(163, 59, 43, 0.15);
}

.checkbox,
.radio {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-2);
    cursor: pointer;
    user-select: none;
}
.checkbox input,
.radio input {
    width: 18px;
    height: 18px;
    accent-color: var(--color-cacao);
    cursor: pointer;
}

/* -----------------------------------------------------------------------------
   Alertas
   ----------------------------------------------------------------------------- */
.alerta {
    display: flex;
    align-items: flex-start;
    gap: var(--espacio-3);
    padding: var(--espacio-3) var(--espacio-4);
    border-radius: var(--radio-md);
    border: 1px solid transparent;
    margin-bottom: var(--espacio-3);
}
.alerta__icono {
    flex-shrink: 0;
    display: inline-flex;
    margin-top: 2px;
}
.alerta__contenido {
    flex: 1;
}
.alerta__titulo {
    display: block;
    margin-bottom: var(--espacio-1);
}
.alerta__mensaje {
    display: block;
}
.alerta__cerrar {
    flex-shrink: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: inherit;
    opacity: 0.6;
    padding: 2px;
}
.alerta__cerrar:hover { opacity: 1; }

.alerta--info {
    background: var(--color-informacion-fondo);
    border-color: var(--color-informacion);
    color: var(--color-informacion);
}
.alerta--éxito, .alerta--exito {
    background: var(--color-exito-fondo);
    border-color: var(--color-exito);
    color: var(--color-exito);
}
.alerta--advertencia {
    background: var(--color-advertencia-fondo);
    border-color: var(--color-advertencia);
    color: var(--color-advertencia);
}
.alerta--error {
    background: var(--color-error-fondo);
    border-color: var(--color-error);
    color: var(--color-error);
}

/* -----------------------------------------------------------------------------
   Tarjetas
   ----------------------------------------------------------------------------- */
.tarjeta {
    position: relative;
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-lg);
    overflow: hidden;
    transition: transform var(--transicion-base),
                box-shadow var(--transicion-base),
                border-color var(--transicion-base);
}
.tarjeta:hover {
    box-shadow: var(--sombra-md);
    border-color: var(--color-borde-fuerte);
}
.tarjeta__cuerpo {
    padding: var(--espacio-5);
}
.tarjeta__icono {
    display: inline-flex;
    color: var(--color-cacao);
    margin-bottom: var(--espacio-3);
}
.tarjeta__titulo {
    margin: 0 0 var(--espacio-2);
    font-size: var(--tamano-texto-lg);
}
.tarjeta__descripcion {
    margin: 0;
    color: var(--color-texto-secundario);
    line-height: var(--altura-linea-base);
}
.tarjeta__meta {
    margin: var(--espacio-3) 0 0;
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-2);
    font-size: var(--tamano-texto-sm);
    color: var(--color-texto-secundario);
}
.tarjeta__pie {
    padding: var(--espacio-3) var(--espacio-5);
    border-top: 1px solid var(--color-borde-sutil);
    background: var(--color-superficie-alt);
    font-size: var(--tamano-texto-sm);
}
.tarjeta__enlace-amplio {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.tarjeta--caracteristica {
    text-align: left;
}
.tarjeta--caracteristica .tarjeta__icono {
    background: var(--color-beige);
    padding: var(--espacio-3);
    border-radius: var(--radio-md);
    color: var(--color-cacao);
}

/* Lista de tarjetas (grid) */
.tarjetas {
    display: grid;
    gap: var(--espacio-5);
    list-style: none;
    padding: 0;
    margin: 0;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* -----------------------------------------------------------------------------
   KPIs
   ----------------------------------------------------------------------------- */
.kpi {
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-lg);
    padding: var(--espacio-5);
    transition: box-shadow var(--transicion-base);
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 160px;
}
.kpi:hover {
    box-shadow: var(--sombra-sm);
}
.kpi__encabezado {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    margin-bottom: var(--espacio-3);
    min-height: 24px;
}
.kpi__icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--color-oliva);
    flex-shrink: 0;
}
.kpi__icono svg {
    display: block;
}
.kpi__titulo {
    margin: 0;
    font-size: var(--tamano-texto-sm);
    font-weight: 500;
    color: var(--color-texto-secundario);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.2;
    flex: 1 1 auto;
    min-width: 0;
}
.kpi__valor {
    margin: 0;
    font-size: var(--tamano-texto-3xl);
    font-weight: 700;
    color: var(--color-marron-profundo);
    line-height: 1.1;
    word-break: break-word;
}
.kpi__unidad {
    font-size: var(--tamano-texto-md);
    color: var(--color-texto-secundario);
    font-weight: 400;
    margin-left: var(--espacio-1);
}
.kpi__tendencia {
    margin: var(--espacio-2) 0 0;
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-1);
    font-size: var(--tamano-texto-sm);
    font-weight: 500;
}
.kpi__tendencia--arriba { color: var(--color-exito); }
.kpi__tendencia--abajo { color: var(--color-error); }
.kpi__tendencia--estable { color: var(--color-texto-secundario); }
.kpi__descripcion {
    margin: auto 0 0;
    padding-top: var(--espacio-3);
    color: var(--color-texto-secundario);
    font-size: var(--tamano-texto-sm);
    line-height: 1.4;
}
.kpi__enlace {
    display: inline-block;
    margin-top: var(--espacio-3);
    color: var(--color-enlace);
    font-size: var(--tamano-texto-sm);
    font-weight: 500;
}

/* -----------------------------------------------------------------------------
   Tablas
   ----------------------------------------------------------------------------- */
.tabla-contenedor {
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-lg);
    overflow: hidden;
    overflow-x: auto;
}

.tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--tamano-texto-sm);
}
.tabla thead {
    background: var(--color-superficie-alt);
}
.tabla th {
    text-align: left;
    padding: var(--espacio-3) var(--espacio-4);
    font-weight: 600;
    color: var(--color-texto-secundario);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--color-borde);
}
.tabla td {
    padding: var(--espacio-3) var(--espacio-4);
    border-bottom: 1px solid var(--color-borde-sutil);
    vertical-align: middle;
}
.tabla tbody tr:last-child td {
    border-bottom: 0;
}
.tabla tbody tr:hover {
    background: var(--color-superficie-alt);
}
.tabla__acciones {
    display: flex;
    gap: var(--espacio-1);
    justify-content: flex-end;
}
.tabla__acciones .boton--icono {
    width: 36px;
    height: 36px;
}

.badge {
    display: inline-block;
    padding: 2px var(--espacio-2);
    border-radius: var(--radio-completo);
    font-size: var(--tamano-texto-xs);
    font-weight: 500;
    background: var(--color-beige);
    color: var(--color-marron-profundo);
}
.badge--activo { background: var(--color-exito-fondo); color: var(--color-exito); }
.badge--inactivo { background: var(--color-error-fondo); color: var(--color-error); }
.badge--pendiente { background: var(--color-advertencia-fondo); color: var(--color-advertencia); }
.badge--publicado { background: var(--color-exito-fondo); color: var(--color-exito); }
.badge--borrador { background: var(--color-beige); color: var(--color-texto-secundario); }
.badge--revision { background: var(--color-informacion-fondo); color: var(--color-informacion); }
.badge--archivado { background: var(--color-superficie-alt); color: var(--color-texto-muy-sutil); }

/* -----------------------------------------------------------------------------
   Paginación
   ----------------------------------------------------------------------------- */
.paginacion {
    display: flex;
    justify-content: center;
    margin: var(--espacio-6) 0;
}
.paginacion__lista {
    display: flex;
    gap: var(--espacio-1);
    list-style: none;
    padding: 0;
    margin: 0;
}
.paginacion__lista a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 var(--espacio-3);
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-md);
    color: var(--color-texto);
    text-decoration: none;
    transition: background var(--transicion-rapida), color var(--transicion-rapida);
}
.paginacion__lista a:hover {
    background: var(--color-beige);
    color: var(--color-texto);
    text-decoration: none;
}
.paginacion__actual a {
    background: var(--color-cacao) !important;
    color: var(--color-blanco) !important;
    border-color: var(--color-cacao) !important;
}
.paginacion__separador {
    display: inline-flex;
    align-items: center;
    padding: 0 var(--espacio-2);
    color: var(--color-texto-muy-sutil);
}

/* -----------------------------------------------------------------------------
   Modal
   ----------------------------------------------------------------------------- */
.modal {
    position: fixed;
    inset: 0;
    background: rgba(28, 24, 20, 0.6);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--espacio-4);
    animation: modal-aparecer var(--transicion-base);
}
.modal[hidden] { display: none; }
.modal__contenido {
    background: var(--color-superficie);
    border-radius: var(--radio-xl);
    box-shadow: var(--sombra-xl);
    max-width: 90vw;
    max-height: 90vh;
    overflow: auto;
    width: 100%;
}
.modal--pequeno { max-width: 400px; }
.modal--normal { max-width: 600px; }
.modal--grande { max-width: 900px; }
.modal__encabezado {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--espacio-4) var(--espacio-5);
    border-bottom: 1px solid var(--color-borde-sutil);
}
.modal__titulo {
    margin: 0;
    font-size: var(--tamano-texto-lg);
}
.modal__cuerpo {
    padding: var(--espacio-5);
}
.modal__pie {
    padding: var(--espacio-3) var(--espacio-5);
    border-top: 1px solid var(--color-borde-sutil);
    display: flex;
    justify-content: flex-end;
    gap: var(--espacio-2);
}

@keyframes modal-aparecer {
    from { opacity: 0; transform: scale(0.98); }
    to { opacity: 1; transform: scale(1); }
}

/* -----------------------------------------------------------------------------
   Cargador (spinner)
   ----------------------------------------------------------------------------- */
.cargador {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-2);
    color: var(--color-texto-secundario);
}
.cargador__spinner {
    display: inline-block;
    border: 3px solid var(--color-borde);
    border-top-color: var(--color-cacao);
    border-radius: var(--radio-completo);
    animation: boton-cargando 0.7s linear infinite;
}
.cargador--pequeno { width: 16px; height: 16px; border-width: 2px; }
.cargador--normal { width: 24px; height: 24px; }
.cargador--grande { width: 36px; height: 36px; border-width: 4px; }

/* -----------------------------------------------------------------------------
   Estado vacío
   ----------------------------------------------------------------------------- */
.estado-vacio {
    text-align: center;
    padding: var(--espacio-12) var(--espacio-5);
    color: var(--color-texto-secundario);
}
.estado-vacio__icono {
    display: inline-flex;
    color: var(--color-texto-muy-sutil);
    margin-bottom: var(--espacio-4);
}
.estado-vacio__titulo {
    margin: 0 0 var(--espacio-2);
    color: var(--color-texto);
}
.estado-vacio__descripcion {
    margin: 0 0 var(--espacio-4);
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

/* -----------------------------------------------------------------------------
   Stepper
   ----------------------------------------------------------------------------- */
.paso {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0 0 var(--espacio-6);
    gap: 0;
    flex-wrap: wrap;
}
.paso__item {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    color: var(--color-texto-secundario);
    font-size: var(--tamano-texto-sm);
}
.paso__numero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radio-completo);
    background: var(--color-beige);
    color: var(--color-texto-secundario);
    font-weight: 600;
    font-size: var(--tamano-texto-sm);
}
.paso__separador {
    width: 32px;
    height: 1px;
    background: var(--color-borde);
    margin: 0 var(--espacio-2);
}
.paso__item--completo .paso__numero {
    background: var(--color-exito);
    color: var(--color-blanco);
}
.paso__item--activo .paso__numero {
    background: var(--color-cacao);
    color: var(--color-blanco);
}
.paso__item--activo {
    color: var(--color-texto);
    font-weight: 500;
}

/* -----------------------------------------------------------------------------
   Migas de pan
   ----------------------------------------------------------------------------- */
.migas {
    margin: var(--espacio-3) 0;
    font-size: var(--tamano-texto-sm);
}
.migas__lista {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: var(--espacio-1);
}
.migas__item { display: inline-flex; align-items: center; gap: var(--espacio-1); }
.migas__item a { color: var(--color-texto-secundario); }
.migas__separador { color: var(--color-texto-muy-sutil); }

/* -----------------------------------------------------------------------------
   Tooltip (controlado por JS)
   ----------------------------------------------------------------------------- */

/* Tooltip flotante que crea tooltips.js: se inyecta en body para escapar
   de overflow:hidden de padres (como el editor). z-index puesto inline en JS. */
.tooltip-flotante {
    position: absolute;
    background: #1a1a1a;
    color: #ffffff;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.82rem;
    line-height: 1.3;
    max-width: 280px;
    width: max-content;
    text-align: left;
    pointer-events: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
    font-weight: 500;
    text-decoration: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.tooltip-flotante--visible {
    opacity: 1;
    transform: translateY(0);
}
.tooltip-flotante::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #1a1a1a;
}

[data-tooltip] {
    position: relative;
}

[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #1a1a1a;
    color: #ffffff;
    padding: var(--espacio-2) var(--espacio-3);
    border-radius: var(--radio-md);
    font-size: var(--tamano-texto-sm);
    line-height: var(--altura-linea-apretada);
    max-width: 280px;
    width: max-content;
    text-align: left;
    z-index: 9999;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    animation: tooltip-aparecer 150ms ease-out;
    font-weight: 500;
    text-decoration: none;
}

[data-tooltip]:hover::before,
[data-tooltip]:focus-visible::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--color-marron-profundo);
    z-index: 100;
    pointer-events: none;
}

/* Tooltip en chrome del bloque: aparece ABAJO (porque el chrome esta
   en la parte superior y el tooltip se cortaria por overflow:hidden
   del .bloque si aparece arriba). */
.bloque__chrome [data-tooltip]:hover::after,
.bloque__chrome [data-tooltip]:focus-visible::after {
    bottom: auto;
    top: calc(100% + 8px);
}
.bloque__chrome [data-tooltip]:hover::before,
.bloque__chrome [data-tooltip]:focus-visible::before {
    bottom: auto;
    top: calc(100% + 2px);
    border: 6px solid transparent;
    border-bottom-color: var(--color-marron-profundo);
    border-top-color: transparent;
}

@keyframes tooltip-aparecer {
    from { opacity: 0; transform: translateX(-50%) translateY(2px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* -----------------------------------------------------------------------------
   Formularios
   ----------------------------------------------------------------------------- */
.formulario {
    max-width: 540px;
}
.formulario__fila {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-4);
    margin-bottom: var(--espacio-4);
}
.formulario__fila--opciones {
    justify-content: space-between;
    align-items: center;
}
.formulario__fila > .campo {
    flex: 1;
    min-width: 200px;
}
.formulario__acciones {
    margin-top: var(--espacio-6);
    display: flex;
    gap: var(--espacio-2);
    flex-wrap: wrap;
}
.parrafo {
    line-height: var(--altura-linea-amplia);
    color: var(--color-texto);
}