/***********************************************************/
/*                                                         */
/* Plataforma e-ducativa - Argentina                       */
/*                                                         */
/* Copyright (c) 2026 de e-ducativa Educación Virtual S.A. */
/*                                                         */
/***********************************************************/
/* ----------------------------------------------------------------
   EDU_EMPTY_STATE - Estado vacio de un listado o una seccion
   ---------------------------------------------------------------- */

/* Caja con un icono en un circulo y el mensaje ("No existen topicos
   definidos"). Va en display block y no flex: el mensaje puede traer
   links o negritas que no deben partirse en lineas.
   El icono es una mascara CSS (no un <i>): asi tambien lo lleva el
   markup que arman los helpers viejos y el JS.
   En la administracion .seccion_vacia (WidgetsAdmin, Paginador y el
   JS de las vistas del back) toma este mismo formato.
   .edu_empty_state_detalle (opcional, adentro): que hacer para salir
   del vacio, con el link a la accion.
   Spec: .claude/skills/css-components/references/edu_empty_state.md */

/* ---------
   Variables
   --------- */
:root {
    --edu-empty-state-accent: var(--variable-color-plataforma, #2766be);
    --edu-empty-state-text: #555555;
    --edu-empty-state-title: #333333;
    --edu-empty-state-detail-text: #666666;
    --edu-empty-state-bg: #fbfbfc;
    --edu-empty-state-border: #dcdfe4;
    --edu-empty-state-radius: 8px;
    --edu-empty-state-padding-top: 32px;
    --edu-empty-state-padding-x: 24px;
    --edu-empty-state-icon-size: 56px;
    --edu-empty-state-glyph-size: 26px;
    --edu-empty-state-icon-bg: color-mix(in oklch, var(--edu-empty-state-accent) 10%, #ffffff);
    /* Bandeja vacia (trazo, se pinta con el color del acento) */
    --edu-empty-state-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='22 12 16 12 14 15 10 15 8 12 2 12'/%3E%3Cpath d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E");
    /* Lupa: sin resultados para una busqueda o un filtro */
    --edu-empty-state-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='20' y1='20' x2='16' y2='16'/%3E%3C/svg%3E");
}

/* ---------
   Container
   --------- */
.edu_empty_state,
.backend .seccion_vacia {
    position: relative;
    display: block;
    margin: 16px 0;
    padding: var(--edu-empty-state-padding-top) var(--edu-empty-state-padding-x) 28px;
    font-size: .9375rem;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    color: var(--edu-empty-state-text);
    background-color: var(--edu-empty-state-bg);
    border: 1px dashed var(--edu-empty-state-border);
    border-radius: var(--edu-empty-state-radius);
}

/* -----
   Icono
   ----- */
/* Circulo con la gamma del acento, en el flujo: el texto queda debajo */
.edu_empty_state::before,
.backend .seccion_vacia::before {
    content: "";
    display: block;
    width: var(--edu-empty-state-icon-size);
    height: var(--edu-empty-state-icon-size);
    margin: 0 auto 14px;
    border-radius: 50%;
    background-color: var(--edu-empty-state-icon-bg);
}

/* Dibujo centrado sobre el circulo (mascara pintada con el acento) */
.edu_empty_state::after,
.backend .seccion_vacia::after {
    content: "";
    position: absolute;
    top: calc(var(--edu-empty-state-padding-top) + (var(--edu-empty-state-icon-size) - var(--edu-empty-state-glyph-size)) / 2);
    left: 50%;
    width: var(--edu-empty-state-glyph-size);
    height: var(--edu-empty-state-glyph-size);
    background-color: var(--edu-empty-state-accent);
    mask: var(--edu-empty-state-icon) center / contain no-repeat;
    transform: translateX(-50%);
}

/* ---------
   Variantes
   --------- */
/* Busqueda o filtro sin resultados */
.edu_empty_state_search { --edu-empty-state-icon: var(--edu-empty-state-icon-search); }

/* Compacto: dentro de paneles, modales o columnas angostas */
.edu_empty_state_sm {
    --edu-empty-state-padding-top: 20px;
    --edu-empty-state-padding-x: 16px;
    --edu-empty-state-icon-size: 40px;
    --edu-empty-state-glyph-size: 20px;
}

/* -------
   Detalle
   ------- */
/* Con detalle (que hacer para salir del vacio) el mensaje pasa a titulo */
.edu_empty_state:has(.edu_empty_state_detalle),
.backend .seccion_vacia:has(.edu_empty_state_detalle) {
    font-weight: 600;
    color: var(--edu-empty-state-title);
}

.edu_empty_state_detalle {
    max-width: 560px;
    margin: 6px auto 0;
    padding: 0;
    font-size: .875rem;
    font-weight: 400;
    color: var(--edu-empty-state-detail-text);
}

/* Los links del mensaje con el color del acento */
.edu_empty_state a,
.backend .seccion_vacia a { color: var(--edu-empty-state-accent); }

/* El link del detalle es la accion para salir del vacio: subrayado, sin negrita */
.edu_empty_state_detalle a {
    text-decoration: underline;
    text-underline-offset: 2px;
}