/* ── Contenedor ─────────────────────────────── */
.sme-dashboard {
    background: #f0f2f5;
    border-radius: 20px;
    padding: 45px 15px 15px;
    max-width: 900px;
    margin: 20px auto;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    box-sizing: border-box;
}

/* ── Header ─────────────────────────────────── */
.sme-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding: 10px 5px 0;
    color: #444;
}
.sme-header span   { font-weight: bold; font-size: 14px; }
.sme-header small  { color: #888; font-size: 11px; }

.sme-header-right  { display: flex; align-items: center; gap: 10px; }

/* ── Botón actualizar ───────────────────────── */
#sme-refresh-btn {
    background: none;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 4px 8px;
    cursor: pointer;
    color: #289d3b;
    font-size: 15px;
    line-height: 1;
    transition: all .2s;
}
#sme-refresh-btn:hover          { background: #289d3b; color: #fff; border-color: #289d3b; }
#sme-refresh-btn.spinning i     { animation: sme-spin .7s linear infinite; }
@keyframes sme-spin             { to { transform: rotate(360deg); } }

/* ── Grilla de tarjetas ─────────────────────── */
.sme-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.sme-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 15px;
    padding: 15px;
    display: flex;
    align-items: center;
    transition: border-color .2s;
    box-sizing: border-box;
}
.sme-card:hover     { border-color: #ccc; }
.sme-card-full      { grid-column: span 4; }

/* ── Icono ──────────────────────────────────── */
.sme-card .icon {
    font-size: 24px;
    color: #289d3b;
    margin-right: 15px;
    width: 30px;
    text-align: center;
}

/* ── Contenido ──────────────────────────────── */
.sme-content        { display: flex; flex-direction: column; }
.sme-label          { font-size: 12px; color: #888; margin-bottom: 2px; }
.sme-value          { font-size: 18px; font-weight: bold; color: #333; white-space: nowrap; line-height: 1.1; }
.sme-value small    { font-size: 12px; color: #666; font-weight: normal; }

/* ── Responsive ─────────────────────────────── */
@media (max-width: 768px) {
    .sme-dashboard          { max-width: 500px; }
    .sme-grid               { grid-template-columns: repeat(2, 1fr); }
    .sme-card-full          { grid-column: span 2; }
}
@media (max-width: 400px) {
    .sme-value              { font-size: 15px; }
    .sme-card .icon         { margin-right: 8px; font-size: 20px; width: 24px; }
}