/**
 * Estilos del frontend — Sistema de Soporte
 * Prefijo: .ssu-
 * Compatible con cualquier tema WordPress activo.
 * Se carga SOLO en páginas con shortcodes del plugin activos.
 */

/* ── Variables ───────────────────────────────────────────────────────────── */
:root {
    --ssu-color-primario:    #2271b1;
    --ssu-color-primario-h:  #135e96;
    --ssu-color-exito:       #00a32a;
    --ssu-color-error:       #d63638;
    --ssu-color-advertencia: #dba617;
    --ssu-color-info:        #2271b1;
    --ssu-color-texto:       #1d2327;
    --ssu-color-texto-sutil: #646970;
    --ssu-color-borde:       #c3c4c7;
    --ssu-color-fondo-alt:   #f6f7f7;
    --ssu-radio:             6px;
    --ssu-sombra:            0 1px 3px rgba(0,0,0,.08);
    --ssu-fuente:            -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --ssu-tam-base:          16px;
}

/* ── Avisos ──────────────────────────────────────────────────────────────── */
.ssu-aviso {
    padding: 12px 16px;
    border-radius: var(--ssu-radio);
    margin: 0 0 20px;
    font-family: var(--ssu-fuente);
    font-size: .9rem;
    border-left: 4px solid var(--ssu-color-info);
    background: #e8f0fe;
    color: #1a3d6b;
    line-height: 1.5;
}
.ssu-aviso a { color: inherit; font-weight: 600; }
.ssu-aviso--exito       { border-color: var(--ssu-color-exito);  background: #edfaef; color: #14521e; }
.ssu-aviso--error       { border-color: var(--ssu-color-error);  background: #fdf2f2; color: #7a1212; }
.ssu-aviso--advertencia { border-color: var(--ssu-color-advertencia); background: #fef9e7; color: #7a5c00; }

/* ── Badges de estado ────────────────────────────────────────────────────── */
.ssu-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
}
/* Estados de ticket */
.ssu-badge--pendiente   { background: #fef9c3; color: #713f12; }
.ssu-badge--en_proceso  { background: #dbeafe; color: #1e3a8a; }
.ssu-badge--resuelto    { background: #dcfce7; color: #14532d; }
.ssu-badge--cerrado     { background: #f1f5f9; color: #475569; }
/* Prioridades */
.ssu-badge--prioridad-baja    { background: #f0fdf4; color: #166534; }
.ssu-badge--prioridad-media   { background: #fefce8; color: #713f12; }
.ssu-badge--prioridad-alta    { background: #fff7ed; color: #9a3412; }
.ssu-badge--prioridad-urgente { background: #fef2f2; color: #991b1b; border: 1px solid #fca5a5; }
/* Estados de renovación */
.ssu-badge--activo    { background: #dcfce7; color: #14532d; }
.ssu-badge--proximo   { background: #fef9c3; color: #713f12; }
.ssu-badge--vencido   { background: #fef2f2; color: #991b1b; }
.ssu-badge--pendiente_pago { background: #dbeafe; color: #1e3a8a; }
.ssu-badge--renovado  { background: #ede9fe; color: #4c1d95; }
/* Estados de cotización */
.ssu-badge--nueva       { background: #e0f2fe; color: #0c4a6e; }
.ssu-badge--en_revision { background: #fef9c3; color: #713f12; }
.ssu-badge--aprobada    { background: #dcfce7; color: #14532d; }
.ssu-badge--rechazada   { background: #fef2f2; color: #991b1b; }
/* Urgente genérico */
.ssu-badge--urgente { background: #fef2f2; color: #991b1b; border: 1px solid #fca5a5; }

/* ── Botones ─────────────────────────────────────────────────────────────── */
.ssu-btn {
    display: inline-block;
    padding: 10px 20px;
    border: none;
    border-radius: var(--ssu-radio);
    font-family: var(--ssu-fuente);
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s, box-shadow .15s;
    line-height: 1.4;
}
.ssu-btn:focus-visible { outline: 3px solid var(--ssu-color-primario); outline-offset: 2px; }
.ssu-btn--primario {
    background: var(--ssu-color-primario);
    color: #fff;
}
.ssu-btn--primario:hover,
.ssu-btn--primario:focus { background: var(--ssu-color-primario-h); color: #fff; text-decoration: none; }
.ssu-btn--secundario {
    background: var(--ssu-color-fondo-alt);
    color: var(--ssu-color-texto);
    border: 1px solid var(--ssu-color-borde);
}
.ssu-btn--secundario:hover { background: #eaeaea; text-decoration: none; }
.ssu-btn--terciario {
    background: transparent;
    color: var(--ssu-color-primario);
    border: 1px solid var(--ssu-color-primario);
}
.ssu-btn--terciario:hover { background: #e8f0fe; text-decoration: none; }
.ssu-btn--pequeno { padding: 6px 14px; font-size: .8rem; }
.ssu-btn:disabled { opacity: .6; cursor: not-allowed; }

/* ── Formularios ─────────────────────────────────────────────────────────── */
.ssu-formulario {
    max-width: 680px;
    font-family: var(--ssu-fuente);
}
.ssu-formulario__cabecera { margin-bottom: 24px; }
.ssu-formulario__titulo   { font-size: 1.4rem; margin: 0 0 8px; }
.ssu-formulario__descripcion { color: var(--ssu-color-texto-sutil); margin: 0; }
.ssu-formulario__nota     { font-size: .8rem; color: var(--ssu-color-texto-sutil); margin-top: 8px; }

.ssu-form { display: flex; flex-direction: column; gap: 0; }

.ssu-campo {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 20px;
}
.ssu-campo__etiqueta {
    font-weight: 600;
    font-size: .875rem;
    color: var(--ssu-color-texto);
}
.ssu-campo__req { color: var(--ssu-color-error); margin-left: 2px; }
.ssu-campo__ayuda { font-size: .78rem; color: var(--ssu-color-texto-sutil); }
.ssu-campo__input,
.ssu-campo__select,
.ssu-campo__textarea {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--ssu-color-borde);
    border-radius: var(--ssu-radio);
    font-family: var(--ssu-fuente);
    font-size: .9rem;
    color: var(--ssu-color-texto);
    background: #fff;
    box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s;
}
.ssu-campo__input:focus,
.ssu-campo__select:focus,
.ssu-campo__textarea:focus {
    outline: none;
    border-color: var(--ssu-color-primario);
    box-shadow: 0 0 0 3px rgba(34,113,177,.15);
}
.ssu-campo__textarea { resize: vertical; min-height: 120px; }
.ssu-campo--error .ssu-campo__input,
.ssu-campo--error .ssu-campo__select,
.ssu-campo--error .ssu-campo__textarea {
    border-color: var(--ssu-color-error);
    box-shadow: 0 0 0 3px rgba(214,54,56,.12);
}

.ssu-campo-grupo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}
@media (max-width: 600px) {
    .ssu-campo-grupo { grid-template-columns: 1fr; }
}

.ssu-campo--acciones {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
}

/* ── Dashboard ───────────────────────────────────────────────────────────── */
.ssu-dashboard { font-family: var(--ssu-fuente); }
.ssu-dashboard__header { margin-bottom: 28px; }
.ssu-dashboard__bienvenida { font-size: 1.5rem; margin: 0 0 8px; }
.ssu-dashboard__subtitulo { color: var(--ssu-color-texto-sutil); margin: 0; }

.ssu-accesos-rapidos {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 32px;
}
.ssu-acceso-rapido {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px 20px;
    background: #fff;
    border: 1px solid var(--ssu-color-borde);
    border-radius: var(--ssu-radio);
    text-decoration: none;
    color: var(--ssu-color-texto);
    font-size: .875rem;
    font-weight: 600;
    box-shadow: var(--ssu-sombra);
    transition: box-shadow .15s, transform .1s;
    min-width: 130px;
}
.ssu-acceso-rapido:hover { box-shadow: 0 4px 12px rgba(0,0,0,.1); transform: translateY(-2px); text-decoration: none; }
.ssu-acceso-rapido__icono { font-size: 1.6rem; line-height: 1; }

.ssu-dashboard__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
@media (max-width: 768px) {
    .ssu-dashboard__grid { grid-template-columns: 1fr; }
}

/* ── Paneles ─────────────────────────────────────────────────────────────── */
.ssu-panel {
    background: #fff;
    border: 1px solid var(--ssu-color-borde);
    border-radius: var(--ssu-radio);
    padding: 20px;
    box-shadow: var(--ssu-sombra);
}
.ssu-panel--ancho-completo { grid-column: 1 / -1; }
.ssu-panel__cabecera {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--ssu-color-fondo-alt);
}
.ssu-panel__titulo { margin: 0; font-size: 1rem; }
.ssu-panel__ver-todos { font-size: .82rem; color: var(--ssu-color-primario); text-decoration: none; font-weight: 600; }
.ssu-panel__ver-todos:hover { text-decoration: underline; }
.ssu-panel__vacio { color: var(--ssu-color-texto-sutil); font-size: .9rem; }
.ssu-panel__vacio a { color: var(--ssu-color-primario); }

/* ── Tablas ──────────────────────────────────────────────────────────────── */
.ssu-tabla-contenedor { overflow-x: auto; }
.ssu-tabla {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--ssu-fuente);
    font-size: .875rem;
}
.ssu-tabla th,
.ssu-tabla td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--ssu-color-fondo-alt);
    vertical-align: middle;
}
.ssu-tabla th {
    font-weight: 700;
    color: var(--ssu-color-texto-sutil);
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    background: var(--ssu-color-fondo-alt);
}
.ssu-tabla tbody tr:hover { background: #fafafa; }
.ssu-tabla tbody tr:last-child td { border-bottom: none; }
.ssu-tabla__col--id      { width: 60px; }
.ssu-tabla__col--acciones{ width: 60px; text-align: right; }
.ssu-tabla__id           { font-weight: 700; color: var(--ssu-color-texto-sutil); font-size: .8rem; }
.ssu-tabla__enlace-titulo{ color: var(--ssu-color-texto); font-weight: 600; text-decoration: none; }
.ssu-tabla__enlace-titulo:hover { color: var(--ssu-color-primario); text-decoration: underline; }
.ssu-tabla__accion       { color: var(--ssu-color-primario); font-size: .82rem; font-weight: 600; text-decoration: none; }
.ssu-tabla__accion:hover { text-decoration: underline; }
.ssu-tabla__vacio        { color: var(--ssu-color-borde); }

/* ── Listado de tickets ──────────────────────────────────────────────────── */
.ssu-listado__cabecera {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.ssu-listado__titulo { margin: 0; font-size: 1.4rem; }
.ssu-listado__vacio  { text-align: center; padding: 40px 20px; }
.ssu-listado__vacio p { color: var(--ssu-color-texto-sutil); margin-bottom: 16px; }

/* ── Filtros ─────────────────────────────────────────────────────────────── */
.ssu-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}
.ssu-filtro {
    padding: 5px 14px;
    border-radius: 20px;
    font-size: .8rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--ssu-color-texto-sutil);
    background: var(--ssu-color-fondo-alt);
    border: 1px solid var(--ssu-color-borde);
    transition: background .1s;
}
.ssu-filtro:hover        { background: #eaeaea; text-decoration: none; color: var(--ssu-color-texto); }
.ssu-filtro--activo      { background: var(--ssu-color-primario); color: #fff; border-color: var(--ssu-color-primario); }
.ssu-filtro--activo:hover{ background: var(--ssu-color-primario-h); color: #fff; }

/* ── Paginación ──────────────────────────────────────────────────────────── */
.ssu-paginacion {
    display: flex;
    gap: 6px;
    margin-top: 20px;
    justify-content: center;
}
.ssu-paginacion__pagina {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--ssu-radio);
    text-decoration: none;
    font-size: .875rem;
    font-weight: 600;
    color: var(--ssu-color-texto);
    background: var(--ssu-color-fondo-alt);
    border: 1px solid var(--ssu-color-borde);
    transition: background .1s;
}
.ssu-paginacion__pagina:hover { background: #eaeaea; text-decoration: none; }
.ssu-paginacion__pagina--activa {
    background: var(--ssu-color-primario);
    color: #fff;
    border-color: var(--ssu-color-primario);
    cursor: default;
}

/* ── Detalle de ticket ───────────────────────────────────────────────────── */
.ssu-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .85rem;
    margin-bottom: 20px;
    color: var(--ssu-color-texto-sutil);
}
.ssu-breadcrumb__enlace { color: var(--ssu-color-primario); text-decoration: none; font-weight: 600; }
.ssu-breadcrumb__enlace:hover { text-decoration: underline; }

.ssu-ticket-detalle__cabecera {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--ssu-color-borde);
}
.ssu-ticket-detalle__titulo-grupo { display: flex; align-items: baseline; gap: 10px; }
.ssu-ticket-detalle__titulo { margin: 0; font-size: 1.3rem; }
.ssu-ticket-detalle__id     { color: var(--ssu-color-texto-sutil); font-size: .9rem; font-weight: 600; }
.ssu-ticket-detalle__badges { display: flex; gap: 8px; align-items: center; }

.ssu-ticket-detalle__meta {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    margin: 0 0 24px;
    font-size: .875rem;
}
.ssu-ticket-detalle__meta-item { display: flex; flex-direction: column; gap: 2px; }
.ssu-ticket-detalle__meta dt   { color: var(--ssu-color-texto-sutil); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; }
.ssu-ticket-detalle__meta dd   { margin: 0; font-weight: 600; }

.ssu-ticket-detalle__seccion         { margin-bottom: 28px; }
.ssu-ticket-detalle__seccion-titulo  { font-size: 1rem; margin: 0 0 12px; padding-bottom: 8px; border-bottom: 2px solid var(--ssu-color-fondo-alt); }

.ssu-ticket-detalle__contenido {
    background: var(--ssu-color-fondo-alt);
    border-radius: var(--ssu-radio);
    padding: 16px 20px;
    font-size: .9rem;
    line-height: 1.7;
}
.ssu-ticket-detalle__contenido--tecnico {
    background: #edf4fb;
    border-left: 4px solid var(--ssu-color-primario);
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.ssu-ticket-detalle__respuesta-avatar { font-size: 1.4rem; flex-shrink: 0; padding-top: 2px; }
.ssu-ticket-detalle__respuesta-cuerpo { flex: 1; }
.ssu-ticket-detalle__respuesta-cuerpo p:first-child { margin-top: 0; }
.ssu-ticket-detalle__respuesta-cuerpo p:last-child  { margin-bottom: 0; }

.ssu-ticket-detalle__acciones {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 8px;
    padding-top: 20px;
    border-top: 1px solid var(--ssu-color-borde);
}

/* ── Mis tickets (cabecera) ──────────────────────────────────────────────── */
.ssu-mis-tickets { font-family: var(--ssu-fuente); }

/* ═══════════════════════════════════════════════════════════════════════════
   ÁREA DE CLIENTE — Diseño estilo panel profesional (AQPHost)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Contenedor principal ────────────────────────────────────────────────── */
.ssu-area-cliente {
    font-family: var(--ssu-fuente);
    color: var(--ssu-color-texto);
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 0 40px;
}

/* ── Cabecera del panel ──────────────────────────────────────────────────── */
.ssu-header-cliente {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    background: #fff;
    border-bottom: 3px solid var(--ssu-color-primario);
    padding: 20px 24px;
    margin-bottom: 0;
}
.ssu-header-cliente__info {
    display: flex;
    align-items: center;
    gap: 14px;
}
.ssu-header-cliente__avatar {
    border-radius: 50%;
    border: 3px solid var(--ssu-color-primario);
    flex-shrink: 0;
}
.ssu-header-cliente__bienvenida {
    margin: 0 0 4px;
    font-size: 1.4rem;
    font-weight: 700;
    color: #1d2327;
}
.ssu-header-cliente__sub {
    margin: 0;
    font-size: .8rem;
    color: var(--ssu-color-texto-sutil);
}
.ssu-header-cliente__acciones {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.ssu-btn-header {
    display: inline-block;
    padding: 8px 18px;
    border-radius: 4px;
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid var(--ssu-color-borde);
    background: var(--ssu-color-fondo-alt);
    color: var(--ssu-color-texto);
    transition: background .15s;
}
.ssu-btn-header:hover { background: #e2e4e6; text-decoration: none; color: var(--ssu-color-texto); }
.ssu-btn-header--primario {
    background: var(--ssu-color-primario);
    color: #fff;
    border-color: var(--ssu-color-primario);
}
.ssu-btn-header--primario:hover { background: var(--ssu-color-primario-h); color: #fff; }

/* ── Contadores superiores ───────────────────────────────────────────────── */
.ssu-contadores {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: #f0f2f5;
    border-bottom: 1px solid #dde0e4;
}
@media (max-width: 700px) {
    .ssu-contadores { grid-template-columns: repeat(2, 1fr); }
}
.ssu-contador {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 18px 12px;
    text-decoration: none;
    color: var(--ssu-color-texto);
    border-right: 1px solid #dde0e4;
    transition: background .15s;
    position: relative;
    gap: 4px;
}
.ssu-contador:last-child { border-right: none; }
.ssu-contador:hover { background: #e4e7ec; text-decoration: none; }
.ssu-contador__numero {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    color: #1d2327;
}
.ssu-contador__icono { font-size: 1.4rem; line-height: 1; }
.ssu-contador__label {
    font-size: .65rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ssu-color-texto-sutil);
    font-weight: 600;
}
.ssu-contador--tickets    .ssu-contador__numero { color: #2271b1; }
.ssu-contador--cotizaciones .ssu-contador__numero { color: #7c3aed; }
.ssu-contador--renovaciones .ssu-contador__numero { color: #059669; }
.ssu-contador--abiertos .ssu-contador__numero   { color: #d97706; }
.ssu-contador--alerta .ssu-contador__numero     { color: #dc2626; }

/* ── Grid del dashboard ──────────────────────────────────────────────────── */
.ssu-dashboard-grid {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 0;
    background: #f0f2f5;
    min-height: 500px;
}
@media (max-width: 768px) {
    .ssu-dashboard-grid { grid-template-columns: 1fr; }
}

.ssu-dashboard-col--left {
    background: #e8eaed;
    border-right: 1px solid #dde0e4;
    padding: 16px;
}
.ssu-dashboard-col--right {
    padding: 16px;
    background: #f0f2f5;
}

/* ── Widgets ─────────────────────────────────────────────────────────────── */
.ssu-widget {
    background: #fff;
    border: 1px solid #dde0e4;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.ssu-widget__header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    font-size: .85rem;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .04em;
    position: relative;
}
.ssu-widget__header--azul    { background: #2271b1; }
.ssu-widget__header--verde   { background: #059669; }
.ssu-widget__header--naranja { background: #d97706; }
.ssu-widget__header--morado  { background: #7c3aed; }
.ssu-widget__header--rojo    { background: #dc2626; }

.ssu-widget__btn-accion {
    margin-left: auto;
    background: rgba(255,255,255,.2);
    color: #fff;
    padding: 3px 10px;
    border-radius: 3px;
    font-size: .75rem;
    text-decoration: none;
    border: 1px solid rgba(255,255,255,.35);
    font-weight: 600;
    flex-shrink: 0;
}
.ssu-widget__btn-accion:hover { background: rgba(255,255,255,.35); text-decoration: none; color: #fff; }

.ssu-widget__cuerpo {
    padding: 0;
}
.ssu-widget__footer {
    padding: 10px 14px;
    border-top: 1px solid #f0f2f5;
    font-size: .8rem;
    text-align: right;
}
.ssu-widget__footer a { color: var(--ssu-color-primario); font-weight: 600; }
.ssu-widget__vacio {
    padding: 24px 16px;
    text-align: center;
    color: var(--ssu-color-texto-sutil);
}
.ssu-widget__vacio p { margin: 0 0 12px; font-size: .875rem; }

/* ── Accesos rápidos (panel izquierdo) ───────────────────────────────────── */
.ssu-accesos-lista { padding: 4px 0; }
.ssu-acceso-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    text-decoration: none;
    color: #3c434a;
    font-size: .875rem;
    font-weight: 500;
    border-bottom: 1px solid #f0f2f5;
    transition: background .12s, color .12s;
}
.ssu-acceso-item:hover {
    background: #f0f7ff;
    color: var(--ssu-color-primario);
    text-decoration: none;
}
.ssu-acceso-item:last-child { border-bottom: none; }
.ssu-acceso-item__icono { font-size: 1rem; flex-shrink: 0; }
.ssu-acceso-item__flecha {
    margin-left: auto;
    font-size: 1.2rem;
    color: #c3c4c7;
    flex-shrink: 0;
}

/* ── Renovaciones lista (panel izquierdo) ────────────────────────────────── */
.ssu-renovacion-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 16px;
    border-bottom: 1px solid #f0f2f5;
    font-size: .82rem;
}
.ssu-renovacion-item:last-child { border-bottom: none; }
.ssu-renovacion-item--urgente { background: #fff8f0; }
.ssu-renovacion-item__nombre { font-weight: 600; color: #1d2327; }
.ssu-renovacion-item__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--ssu-color-texto-sutil);
}
.ssu-renovacion-item__dias { font-weight: 700; color: #d97706; }
.ssu-renovacion-item__dias--urgente { color: #dc2626; }

/* ── Tabla dentro de widgets ─────────────────────────────────────────────── */
.ssu-tabla-widget {
    width: 100%;
    border-collapse: collapse;
    font-size: .82rem;
}
.ssu-tabla-widget th {
    background: #f8f9fa;
    padding: 8px 14px;
    text-align: left;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ssu-color-texto-sutil);
    border-bottom: 1px solid #eef0f2;
}
.ssu-tabla-widget td {
    padding: 10px 14px;
    border-bottom: 1px solid #f5f6f7;
    vertical-align: middle;
    color: #3c434a;
}
.ssu-tabla-widget tbody tr:last-child td { border-bottom: none; }
.ssu-tabla-widget tbody tr:hover { background: #f8fbff; }
.ssu-tabla-widget a {
    color: var(--ssu-color-primario);
    font-weight: 600;
    text-decoration: none;
}
.ssu-tabla-widget a:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════════════════
   LOGIN PERSONALIZADO DEL PANEL DE CLIENTE
   ═══════════════════════════════════════════════════════════════════════════ */

.ssu-login-wrap {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 40px 16px;
    min-height: 400px;
    font-family: var(--ssu-fuente);
}

.ssu-login-card {
    background: #fff;
    border: 1px solid var(--ssu-color-borde);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,.08);
    width: 100%;
    max-width: 420px;
    overflow: hidden;
}

.ssu-login-card__header {
    background: var(--ssu-color-primario);
    padding: 28px 28px 22px;
    text-align: center;
    color: #fff;
}
.ssu-login-logo {
    max-height: 60px;
    max-width: 180px;
    width: auto;
    height: auto;
    display: block;
    margin: 0 auto 12px;
    object-fit: contain;
}
.ssu-login-card__empresa {
    font-size: 1.3rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 6px;
}
.ssu-login-card__titulo {
    margin: 0 0 4px;
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
}
.ssu-login-card__subtitulo {
    margin: 0;
    font-size: .82rem;
    color: rgba(255,255,255,.8);
}

/* Error */
.ssu-login-error {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 16px 24px 0;
    padding: 10px 14px;
    background: #fef2f2;
    border: 1px solid #fca5a5;
    border-radius: 6px;
    color: #991b1b;
    font-size: .875rem;
}
.ssu-login-error__icono { font-size: 1rem; flex-shrink: 0; }

/* Formulario */
.ssu-login-form {
    padding: 24px 28px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ssu-login-campo { display: flex; flex-direction: column; gap: 5px; }
.ssu-login-campo__label {
    font-size: .82rem;
    font-weight: 600;
    color: #374151;
}
.ssu-login-campo__input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.ssu-login-campo__icono {
    position: absolute;
    left: 11px;
    font-size: .9rem;
    pointer-events: none;
    line-height: 1;
}
.ssu-login-campo__input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: .95rem;
    color: #1a2e4a;
    background: #fff;
    box-sizing: border-box;
}
.ssu-login-campo__input:focus {
    outline: none;
    border-color: var(--ssu-color-primario);
    box-shadow: 0 0 0 3px rgba(34,113,177,.15);
}
.ssu-login-campo__toggle-pass {
    position: absolute;
    right: 10px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: .9rem;
    padding: 4px;
    line-height: 1;
    color: #9ca3af;
}
.ssu-login-campo__toggle-pass:hover { color: #374151; }

/* Opciones */
.ssu-login-opciones {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.ssu-login-recordar {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .82rem;
    color: #4b5563;
    cursor: pointer;
    user-select: none;
}
.ssu-login-recordar input { cursor: pointer; }
.ssu-login-olvide {
    font-size: .82rem;
    color: var(--ssu-color-primario);
    text-decoration: none;
}
.ssu-login-olvide:hover { text-decoration: underline; }

/* Botón principal */
.ssu-login-btn {
    width: 100%;
    padding: 12px;
    background: var(--ssu-color-primario);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: .95rem;
    font-family: var(--ssu-fuente);
    font-weight: 700;
    cursor: pointer;
    transition: background .15s;
    margin-top: 4px;
}
.ssu-login-btn:hover  { background: var(--ssu-color-primario-h); }
.ssu-login-btn:disabled { opacity: .65; cursor: not-allowed; }

/* Pie del card */
.ssu-login-card__pie {
    padding: 14px 28px 20px;
    text-align: center;
    border-top: 1px solid #f3f4f6;
}
.ssu-login-card__pie p {
    margin: 0;
    font-size: .82rem;
    color: #6b7280;
}
.ssu-login-card__pie a {
    color: var(--ssu-color-primario);
    font-weight: 600;
    text-decoration: none;
}
.ssu-login-card__pie a:hover { text-decoration: underline; }

/* Responsive */
@media (max-width: 480px) {
    .ssu-login-form { padding: 20px 18px 16px; }
    .ssu-login-card__header { padding: 22px 18px 16px; }
    .ssu-login-card__pie { padding: 12px 18px 16px; }
}

/* ── NUEVO DISEÑO DASHBOARD ──────────────────────────────────────────────── */

/* Barra superior */
.ssu-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #1a2e4a;
    color: #fff;
    padding: 0 24px;
    height: 56px;
    border-radius: var(--ssu-radio) var(--ssu-radio) 0 0;
    flex-wrap: wrap;
    gap: 8px;
}
.ssu-topbar__marca {
    font-size: 1.1rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: .03em;
}
.ssu-topbar__nav {
    display: flex;
    gap: 4px;
}
.ssu-topbar__enlace {
    color: #cbd5e1;
    text-decoration: none;
    padding: 6px 14px;
    border-radius: 4px;
    font-size: .85rem;
    font-weight: 500;
    transition: background .15s, color .15s;
    display: flex;
    align-items: center;
    gap: 6px;
}
.ssu-topbar__enlace:hover {
    background: rgba(255,255,255,.12);
    color: #fff;
    text-decoration: none;
}
.ssu-topbar__enlace svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.ssu-topbar__usuario {
    display: flex;
    align-items: center;
    gap: 10px;
}
.ssu-topbar__hola {
    color: #e2e8f0;
    font-size: .9rem;
}
.ssu-topbar__perfil img {
    border-radius: 50%;
    border: 2px solid #f59e0b;
    display: block;
}
.ssu-topbar__salir {
    background: #ffffff;
    color: #1a2e4a;
    padding: 6px 14px;
    border-radius: 4px;
    font-size: .82rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s;
}
.ssu-topbar__salir:hover { background: #e2e8f0; color: #1a2e4a; text-decoration: none; }

/* Bienvenida */
.ssu-bienvenida {
    background: #f8fafc;
    padding: 28px 24px 20px;
    border-left: 1px solid #e2e8f0;
    border-right: 1px solid #e2e8f0;
}
.ssu-bienvenida__titulo {
    font-size: 1.8rem;
    font-weight: 700;
    color: #1a2e4a;
    margin: 0 0 4px;
}
.ssu-bienvenida__subtitulo {
    font-size: .9rem;
    color: #64748b;
    text-decoration: none;
}
.ssu-bienvenida__subtitulo:hover { color: var(--ssu-color-primario); }

/* Contadores nuevo layout */
.ssu-contadores-nuevo {
    display: flex;
    gap: 20px;
    padding: 20px 24px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-top: none;
    align-items: flex-start;
}
.ssu-contadores-nuevo__izq {
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1;
}
.ssu-contadores-nuevo__cajones {
    display: grid;
    grid-template-columns: repeat( 4, 1fr );
    gap: 14px;
}
@media (max-width: 900px) {
    .ssu-contadores-nuevo { flex-direction: column; }
    .ssu-contadores-nuevo__der { width: 100%; }
    .ssu-contadores-nuevo__cajones { grid-template-columns: repeat( 2, 1fr ); }
}
.ssu-contadores-nuevo__der {
    width: 260px;
    flex-shrink: 0;
}
.ssu-contador-nuevo {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: var(--ssu-radio);
    padding: 18px 16px;
    text-decoration: none;
    color: #1a2e4a;
    transition: box-shadow .15s, border-color .15s, transform .15s;
    cursor: pointer;
    border-bottom: 4px solid #e2e8f0;
}
.ssu-contador-nuevo:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,.1);
    text-decoration: none;
    color: #1a2e4a;
    transform: translateY(-2px);
}
.ssu-contador-nuevo:nth-child(1) { border-bottom-color: #3b82f6; }
.ssu-contador-nuevo:nth-child(2) { border-bottom-color: #8b5cf6; }
.ssu-contador-nuevo:nth-child(3) { border-bottom-color: #10b981; }
.ssu-contador-nuevo:nth-child(4) { border-bottom-color: #f59e0b; }
.ssu-contador-nuevo__icono {
    font-size: 2rem;
    line-height: 1;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #f0f7ff;
}
.ssu-contador-nuevo:nth-child(1) .ssu-contador-nuevo__icono { background: #eff6ff; }
.ssu-contador-nuevo:nth-child(2) .ssu-contador-nuevo__icono { background: #faf5ff; }
.ssu-contador-nuevo:nth-child(3) .ssu-contador-nuevo__icono { background: #f0fdf4; }
.ssu-contador-nuevo:nth-child(4) .ssu-contador-nuevo__icono { background: #fffbeb; }
.ssu-contador-nuevo__datos {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ssu-contador-nuevo__numero {
    font-size: 1.8rem;
    font-weight: 800;
    color: #1a2e4a;
    line-height: 1;
}
.ssu-contador-nuevo__label {
    font-size: .72rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600;
}
.ssu-contador-nuevo--alerta .ssu-contador-nuevo__numero { color: #e53e3e; }

@media (max-width: 900px) {
    .ssu-contadores-nuevo {
        flex-direction: column;
    }
    .ssu-contadores-nuevo__der {
        width: 100%;
    }
    .ssu-contadores-nuevo__izq {
        grid-template-columns: repeat( 2, 1fr );
    }
}
@media (max-width: 500px) {
    .ssu-contadores-nuevo__izq {
        grid-template-columns: repeat( 2, 1fr );
    }
    .ssu-contador-nuevo {
        padding: 14px 10px;
        gap: 8px;
    }
    .ssu-contador-nuevo__icono {
        font-size: 1.8rem;
    }
    .ssu-contador-nuevo__numero {
        font-size: 1.4rem;
    }
    .ssu-contador-nuevo__label {
        font-size: .65rem;
    }
    .ssu-topbar__nav {
        display: none;
    }
    .ssu-bienvenida__titulo {
        font-size: 1.4rem;
    }
}

/* Panel renovaciones lateral */
.ssu-panel-renovaciones {
    background: #f0f7ff;
    border: 1px solid #bfdbfe;
    border-radius: var(--ssu-radio);
    padding: 16px;
}
.ssu-panel-renovaciones__titulo {
    font-size: .9rem;
    font-weight: 700;
    color: #1a2e4a;
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #bfdbfe;
}
.ssu-panel-renovaciones__item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 12px;
}
.ssu-panel-renovaciones__icono { font-size: 1.2rem; }
.ssu-panel-renovaciones__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ssu-panel-renovaciones__info a {
    font-size: .88rem;
    font-weight: 600;
    color: #1a2e4a;
    text-decoration: none;
}
.ssu-panel-renovaciones__info a:hover { color: var(--ssu-color-primario); }
.ssu-panel-renovaciones__dias {
    font-size: .82rem;
    color: #059669;
    font-weight: 600;
}
.ssu-panel-renovaciones__dias--urgente { color: #e53e3e; font-weight: 700; }
.ssu-panel-renovaciones__btn {
    display: block;
    background: #1a2e4a;
    color: #fff;
    text-align: center;
    padding: 10px;
    border-radius: var(--ssu-radio);
    font-size: .88rem;
    font-weight: 600;
    text-decoration: none;
    margin-top: 8px;
    transition: background .15s;
}
.ssu-panel-renovaciones__btn:hover { background: #2d4a6e; color: #fff; text-decoration: none; }
.ssu-panel-renovaciones__vacio { font-size: .85rem; color: #64748b; }

@media (max-width: 768px) {
    .ssu-contadores-nuevo { flex-direction: column; }
    .ssu-contadores-nuevo__der { width: 100%; }
    .ssu-topbar__nav { display: none; }
}

/* ── PARTE 2: Grid principal y accesos ───────────────────────────────────── */
.ssu-dashboard-grid-nuevo {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-top: none;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.ssu-accesos-nuevo {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: var(--ssu-radio);
    padding: 20px;
}
.ssu-accesos-nuevo__titulo {
    font-size: 1rem;
    font-weight: 700;
    color: #1a2e4a;
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e2e8f0;
}
.ssu-accesos-nuevo__lista {
    display: grid;
    grid-template-columns: repeat( auto-fill, minmax(220px, 1fr) );
    gap: 10px;
}
.ssu-acceso-nuevo {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: var(--ssu-radio);
    padding: 12px 14px;
    text-decoration: none;
    color: #1a2e4a;
    font-size: .9rem;
    font-weight: 500;
    transition: box-shadow .15s, border-color .15s;
}
.ssu-acceso-nuevo:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
    border-color: var(--ssu-color-primario);
    text-decoration: none;
    color: #1a2e4a;
}
.ssu-acceso-nuevo__icono {
    color: var(--ssu-color-primario);
    display: flex;
    align-items: center;
}
.ssu-acceso-nuevo__texto { flex: 1; }
.ssu-acceso-nuevo__flecha {
    color: #94a3b8;
    font-size: 1.2rem;
}

/* ── PARTE 3: Grid 2 columnas + Paneles ──────────────────────────────────── */
.ssu-grid-dos-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.ssu-panel-nuevo {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: var(--ssu-radio);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.ssu-panel-nuevo__cuerpo {
    padding: 16px;
    flex: 1;
}
.ssu-panel-nuevo__cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    color: #fff;
}
.ssu-panel-nuevo__cabecera--verde  { background: #059669; }
.ssu-panel-nuevo__cabecera--morado { background: #7c3aed; }
.ssu-panel-nuevo__titulo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .9rem;
    font-weight: 700;
}
.ssu-panel-nuevo__btn-accion {
    background: rgba(255,255,255,.2);
    color: #fff;
    padding: 5px 12px;
    border-radius: 4px;
    font-size: .8rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s;
    white-space: nowrap;
}
.ssu-panel-nuevo__btn-accion:hover {
    background: rgba(255,255,255,.35);
    color: #fff;
    text-decoration: none;
}
.ssu-panel-nuevo__cuerpo { padding: 16px; }
.ssu-panel-nuevo__pie {
    padding: 10px 0 4px;
    text-align: right;
    font-size: .85rem;
}
.ssu-panel-nuevo__pie a { color: var(--ssu-color-primario); text-decoration: none; }
.ssu-panel-nuevo__pie a:hover { text-decoration: underline; }
.ssu-panel-nuevo__vacio {
    text-align: center;
    padding: 20px 0;
    color: #64748b;
    font-size: .9rem;
}
.ssu-tabla-nueva {
    width: 100%;
    border-collapse: collapse;
    font-size: .85rem;
}
.ssu-tabla-nueva th {
    text-align: left;
    padding: 8px 10px;
    color: #64748b;
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom: 2px solid #e2e8f0;
}
.ssu-tabla-nueva td {
    padding: 10px;
    border-bottom: 1px solid #f1f5f9;
    color: #1a2e4a;
    vertical-align: middle;
}
.ssu-tabla-nueva tr:last-child td { border-bottom: none; }
.ssu-tabla-nueva a { color: var(--ssu-color-primario); text-decoration: none; }
.ssu-tabla-nueva a:hover { text-decoration: underline; }

@media (max-width: 768px) {
    .ssu-grid-dos-col { grid-template-columns: 1fr; }
}

/* ── PARTE 4: Acciones rápidas ───────────────────────────────────────────── */
.ssu-acciones-rapidas {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: var(--ssu-radio);
    padding: 20px;
}
.ssu-acciones-rapidas__titulo {
    font-size: 1rem;
    font-weight: 700;
    color: #1a2e4a;
    margin: 0 0 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e2e8f0;
}
.ssu-acciones-rapidas__grid {
    display: grid;
    grid-template-columns: repeat( auto-fill, minmax( 140px, 1fr ) );
    gap: 12px;
}
.ssu-accion-rapida {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: var(--ssu-radio);
    padding: 20px 16px;
    text-decoration: none;
    color: #1a2e4a;
    font-size: .85rem;
    font-weight: 600;
    text-align: center;
    transition: box-shadow .15s, border-color .15s, transform .15s;
}
.ssu-accion-rapida:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,.1);
    border-color: var(--ssu-color-primario);
    transform: translateY(-2px);
    text-decoration: none;
    color: #1a2e4a;
}
.ssu-accion-rapida__icono {
    color: var(--ssu-color-primario);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    background: #eff6ff;
    border-radius: 50%;
}
.ssu-accion-rapida:nth-child(1) .ssu-accion-rapida__icono { background: #eff6ff; color: #2271b1; }
.ssu-accion-rapida:nth-child(2) .ssu-accion-rapida__icono { background: #f0fdf4; color: #059669; }
.ssu-accion-rapida:nth-child(3) .ssu-accion-rapida__icono { background: #fff7ed; color: #ea580c; }
.ssu-accion-rapida:nth-child(4) .ssu-accion-rapida__icono { background: #faf5ff; color: #7c3aed; }
.ssu-accion-rapida__label { line-height: 1.3; }

@media (max-width: 600px) {
    .ssu-acciones-rapidas__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── PERFIL DEL CLIENTE ──────────────────────────────────────────────────── */
.ssu-perfil-wrap {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-top: none;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.ssu-perfil-card {
    display: flex;
    align-items: center;
    gap: 20px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: var(--ssu-radio);
    padding: 20px;
}
.ssu-perfil-card__avatar img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid var(--ssu-color-primario);
    display: block;
}
.ssu-perfil-card__info h2 {
    font-size: 1.2rem;
    font-weight: 700;
    color: #1a2e4a;
    margin: 0 0 4px;
}
.ssu-perfil-card__info p {
    font-size: .88rem;
    color: #64748b;
    margin: 0 0 4px;
}
.ssu-perfil-card__rol {
    display: inline-block;
    background: #eff6ff;
    color: #2271b1;
    font-size: .75rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
}
.ssu-perfil-form-wrap {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: var(--ssu-radio);
    padding: 24px;
}
.ssu-perfil-seccion {
    margin-bottom: 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid #f1f5f9;
}
.ssu-perfil-seccion:last-of-type { border-bottom: none; }
.ssu-perfil-seccion__titulo {
    font-size: 1rem;
    font-weight: 700;
    color: #1a2e4a;
    margin: 0 0 16px;
}
.ssu-perfil-campos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media (max-width: 600px) {
    .ssu-perfil-campos { grid-template-columns: 1fr; }
    .ssu-perfil-card { flex-direction: column; text-align: center; }
}

/* ── VISTA PAGO AHORA ────────────────────────────────────────────────────── */
.ssu-pago-wrap {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: var(--ssu-radio);
    padding: 32px;
    max-width: 600px;
    margin: 0 auto;
}
.ssu-pago-header {
    text-align: center;
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e2e8f0;
}
.ssu-pago-header__empresa {
    font-size: 1.4rem;
    font-weight: 800;
    color: #1a2e4a;
    margin: 0 0 8px;
}
.ssu-pago-header__titulo {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1a2e4a;
    margin: 0 0 8px;
}
.ssu-pago-header__subtitulo {
    font-size: .9rem;
    color: #64748b;
    margin: 0;
}
.ssu-pago-datos {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: var(--ssu-radio);
    padding: 20px 24px;
    font-size: .95rem;
    line-height: 2;
    color: #1a2e4a;
}
.ssu-pago-datos p {
    margin: 0 0 8px;
}
.ssu-pago-datos br {
    display: block;
    content: "";
    margin: 4px 0;
}
.ssu-pago-datos--vacio {
    text-align: center;
    color: #64748b;
    font-style: italic;
}

.ssu-pago-comprobante {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 2px solid #e2e8f0;
}
.ssu-pago-comprobante__titulo {
    font-size: 1rem;
    font-weight: 700;
    color: #1a2e4a;
    margin: 0 0 20px;
}
.ssu-pago-linea {
    padding: 8px 0;
    border-bottom: 1px solid #f1f5f9;
    font-size: .95rem;
    color: #1a2e4a;
}
.ssu-pago-linea:last-child { border-bottom: none; }
/* ── FIX MOBILE: Topbar, contadores y accesos (Julio 2026) ─────────────── */
@media (max-width: 600px) {
    /* Logo del topbar: limitar tamaño para que no tape el "Hola, usuario" */
    .ssu-topbar__marca img,
    .ssu-topbar__marca svg {
        max-height: 28px;
        width: auto;
        display: block;
    }
    .ssu-topbar {
        height: auto;
        min-height: 56px;
        padding: 10px 16px;
        justify-content: center;
        text-align: center;
    }
    .ssu-topbar__marca {
        order: 1;
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .ssu-topbar__nav {
        order: 3;
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }
    .ssu-topbar__usuario {
        order: 2;
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }
    .ssu-topbar__hola {
        font-size: .8rem;
        white-space: normal;
        text-align: center;
    }

    /* Tarjetas de contadores: 1 columna en pantallas angostas */
    .ssu-contadores-nuevo__cajones {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .ssu-contador-nuevo {
        padding: 12px 10px;
        gap: 10px;
    }
    .ssu-contador-nuevo__icono {
        width: 40px;
        height: 40px;
        font-size: 1.4rem;
    }
    .ssu-contador-nuevo__numero {
        font-size: 1.3rem;
    }
    .ssu-contador-nuevo__label {
        font-size: .62rem;
        letter-spacing: .02em;
    }

    /* Accesos directos: evitar que el texto empuje la flecha fuera de la caja */
    .ssu-acceso-item {
        padding: 10px 12px;
        font-size: .82rem;
    }
    .ssu-acceso-item__flecha {
        font-size: 1rem;
    }
}

@media (max-width: 380px) {
    .ssu-contadores-nuevo__cajones {
        grid-template-columns: 1fr;
    }
}

/* ── Tarjetas de métodos de pago (Julio 2026) ───────────────────────────── */
.ssu-pago-metodos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}
.ssu-pago-metodo-card {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 14px 16px;
    background: #fff;
}
.ssu-pago-metodo-card__cabecera {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px dashed #e2e8f0;
}
.ssu-pago-metodo-card__icono { font-size: 1.2rem; }
.ssu-pago-metodo-card__banco { font-weight: 700; color: #1e293b; flex: 1; }
.ssu-pago-metodo-card__moneda {
    font-size: .72rem;
    font-weight: 700;
    background: #f1f5f9;
    color: #475569;
    padding: 2px 8px;
    border-radius: 20px;
}
.ssu-pago-metodo-card__fila {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    font-size: .85rem;
    padding: 4px 0;
}
.ssu-pago-metodo-card__etiqueta { color: #64748b; }
.ssu-pago-metodo-card__valor {
    font-weight: 600;
    color: #1e293b;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.ssu-pago-metodo-card__copiar {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: .85rem;
    padding: 0;
    line-height: 1;
}