/* Escape Dashboard — lo propio de este panel.

   Los colores, la tipografía y los botones vienen de assets/css/escape-ui.css,
   que es el sistema compartido con el resto de herramientas (el mismo de
   gymark.com.co). Aquí solo va lo que es exclusivo del dashboard: la rejilla
   de tarjetas, el buscador y el pie. */

[hidden] { display: none !important; }
button, input { font: inherit; }

body {
    background:
        radial-gradient(circle at top left, color-mix(in srgb, var(--text) 6%, transparent), transparent 32%),
        var(--bg);
}

/* --- Buscador de la cabecera --- */
.header-actions { display: flex; align-items: center; gap: 10px; }

.search {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 12px;
    border: 2px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    transition: border-color var(--fast), box-shadow var(--fast);
}
.search:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent);
}
.search .ico { color: var(--text-soft); }
.search input {
    width: 210px;
    padding: 9px 0;
    border: 0;
    background: transparent;
    color: var(--text);
    font-size: 0.92rem;
}
.search input:focus { outline: 0; box-shadow: none; }
.search kbd { flex: 0 0 auto; }

/* --- Filtros --- */
.filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 26px 0 20px;
}

/* --- Rejilla de herramientas --- */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: 18px;
    /* Sin descripciones, igualar las tarjetas de una fila ya no ayuda: la de
       Calendar lleva tres botones y una nota, y estiraba a su vecina dejando
       un hueco vacío encima del botón. Cada tarjeta mide lo que ocupa. */
    align-items: start;
}

.tool {
    display: flex;
    flex-direction: column;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    transition: transform var(--fast), border-color var(--fast), box-shadow var(--fast);
}
.tool:hover {
    transform: translateY(-3px);
    border-color: var(--line-strong);
    box-shadow: var(--shadow-lg);
}

.tool-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }

/* El icono de la herramienta, en su cuadro. Es el MISMO que usa la
   herramienta en su propia cabecera: con verlo ya se sabe cuál es. */
.tool-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--bg-alt);
    color: var(--text);
}
.tool-icon .ico { font-size: 23px; }
.tool:hover .tool-icon { background: var(--primary); border-color: var(--primary); color: var(--text-inverse); }

.tool-title { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; min-width: 0; }
.tool-title h2 {
    margin: 0;
    font-size: 1.3rem;
    letter-spacing: 0.06em;
    width: 100%;
}

.tool-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.tool-links .btn { flex: 0 1 auto; }

.tool-nota {
    margin: 12px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--line-soft);
    color: var(--text-soft);
    font-size: 0.82rem;
    line-height: 1.5;
}

/* Insignias de acceso: se distinguen por color, no solo por texto. */
.badge-equipo { border-color: var(--success); color: var(--success); background: var(--success-soft); }
.badge-admin  { border-color: var(--warning); color: var(--warning); background: var(--warning-soft); }
.badge-colab  { border-color: var(--info);    color: var(--info);    background: var(--info-soft); }

.vacio {
    margin: 40px 0;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.95rem;
}

/* --- Pie --- */
.pie {
    margin-top: 44px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
    color: var(--text-soft);
    font-size: 0.85rem;
    text-align: center;
}
.pie p { margin: 0 0 4px; }
.pie-nota { font-size: 0.8rem; }

@media (max-width: 720px) {
    .grid { grid-template-columns: 1fr; }
    .search input { width: 100%; }
    .header-actions { width: 100%; }
    .search { flex: 1 1 auto; }
    .tool-links .btn { flex: 1 1 auto; }
}