/* ============================================================
   T-Móvil Forms — Panel de técnicos
   Grid 2 columnas desktop / 1 columna móvil
   ============================================================ */

:root {
    --tmf-black:  #1a1a1a;
    --tmf-blue:   #0052cc;
    --tmf-gray:   #6b778c;
    --tmf-border: #dfe1e6;
    --tmf-light:  #f4f5f7;
    --tmf-white:  #ffffff;
}

/* ── Wrapper ─────────────────────────────────────────────── */
.tmf-panel-wrap {
    max-width: 760px;
    margin: 0 auto;
    padding: 20px 16px 48px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    background: var(--tmf-white);
    color: var(--tmf-black);
}

/* ── Título ──────────────────────────────────────────────── */
.tmf-panel-title {
    font-size: 26px;
    font-weight: 700;
    color: var(--tmf-black);
    margin: 0 0 24px;
    line-height: 1.2;
}

/* ── Grid de tarjetas ────────────────────────────────────── */
.tmf-panel-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* ── Tarjeta ─────────────────────────────────────────────── */
.tmf-panel-card {
    display: block;
    text-decoration: none;
    color: inherit;
    background: var(--tmf-white);
    border: 1.5px solid var(--tmf-border);
    border-radius: 8px;
    padding: 24px 20px;
    transition: border-color .18s, box-shadow .18s, transform .18s;
}

.tmf-panel-card:hover,
.tmf-panel-card:focus {
    border-color: var(--tmf-blue);
    box-shadow: 0 4px 18px rgba(0, 82, 204, .12);
    transform: translateY(-2px);
    text-decoration: none;
    color: inherit;
    outline: none;
}

.tmf-panel-card:active {
    transform: translateY(0);
    box-shadow: none;
}

.tmf-panel-card-title {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: var(--tmf-black);
    margin-bottom: 6px;
    line-height: 1.3;
}

.tmf-panel-card-desc {
    font-size: 13px;
    color: var(--tmf-gray);
    margin: 0;
    line-height: 1.5;
}

/* ── Responsivo ──────────────────────────────────────────── */
@media ( max-width: 600px ) {
    .tmf-panel-grid {
        grid-template-columns: 1fr;
    }

    .tmf-panel-title { font-size: 22px; }

    .tmf-panel-wrap { padding: 14px 12px 36px; }

    .tmf-panel-card { padding: 18px 16px; }
}