/* ============================================================
   PORTAL MIELICANDOUR — CSS COMPLETO
   ============================================================ */
:root {
    --negro:    #0a0a0a;
    --gris:     #141414;
    --gris2:    #1e1e1e;
    --gris3:    #2a2a2a;
    --borde:    #2e2e2e;
    --texto:    #f0f0f0;
    --muted:    #888;
    --azul:     #1a3a6b;
    --verde:    #00c853;
    --rojo:     #e53935;
    --amarillo: #ffd600;
    --acento:   #1565c0;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    background:  var(--negro);
    color:       var(--texto);
    font-family: 'Helvetica Neue', Arial, sans-serif;
}

/* Ocultar header, menú y título del tema WordPress */
.wp-site-blocks > header,
.wp-site-blocks > .wp-block-template-part,
header.wp-block-template-part,
.site-header, #masthead,
nav.wp-block-navigation,
.wp-block-navigation,
.wp-block-site-title,
.wp-block-site-tagline,
h1.wp-block-post-title,
.entry-header, .page-header,
.wp-block-post-title { display: none !important; }

.wp-site-blocks,
.wp-site-blocks main,
.wp-site-blocks .wp-block-group,
.entry-content,
#primary, main {
    padding:   0 !important;
    margin:    0 !important;
    max-width: 100% !important;
    width:     100% !important;
}

/* ── PORTAL WRAPPER ── */
.mcc-portal {
    min-height: 100vh;
    background: var(--negro);
    max-width:  100vw;
    overflow-x: hidden;
}

/* ── SALUDO ── */
.mcc-saludo {
    padding:        12px 24px 0;
    font-size:      24px;
    font-weight:    700;
    color:          var(--texto);
    letter-spacing: -0.5px;
}

/* ══════════════════════════════════════
   HEADER REDISEÑADO
══════════════════════════════════════ */
.mcc-header {
    background:    #0d0d0d;
    border-bottom: 1px solid #222;
    display:       flex;
    align-items:   center;
    padding:       10px 24px;
    gap:           20px;
    flex-wrap:     wrap;
    font-size:     12px;
    min-height:    68px;
}

/* Logo */
.mcc-header-logo {
    display:     flex;
    align-items: center;
    flex-shrink: 0;
}

.mcc-header-logo img {
    height:     48px;
    width:      auto;
    max-width:  220px;
    object-fit: contain;
    filter:     brightness(1.05);
}

.mcc-logo-fallback {
    width:           44px;
    height:          44px;
    background:      var(--acento);
    border-radius:   6px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-weight:     900;
    font-size:       16px;
    letter-spacing:  1px;
}

/* Separador vertical */
.mcc-header-fecha,
.mcc-header-rol {
    border-left:  1px solid #2a2a2a;
    padding-left: 20px;
    line-height:  1.7;
}

.mcc-header-label {
    color:          var(--muted);
    font-size:      9px;
    display:        block;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

/* Usuario — empujado a la derecha */
.mcc-header-usuario {
    margin-left: auto;
    text-align:  right;
}

.mcc-header-usuario strong {
    font-size:      15px;
    display:        block;
    letter-spacing: 2px;
    color:          #fff;
}

/* Botón salir */
.mcc-logout {
    background:    #1a1a1a;
    color:         var(--muted);
    padding:       7px 14px;
    border-radius: 6px;
    text-decoration: none;
    font-size:     11px;
    border:        1px solid #333;
    letter-spacing: 0.5px;
    transition:    all 0.15s;
}
.mcc-logout:hover { color: var(--texto); border-color: #555; }

/* ── SUBHEADER ── */
.mcc-subheader {
    background:    #0f0f0f;
    border-bottom: 1px solid #1e1e1e;
    display:       flex;
    align-items:   center;
    padding:       7px 24px;
    gap:           28px;
    font-size:     11px;
    letter-spacing: 0.5px;
}

.mcc-cliente-activo-nombre {
    margin-left: auto;
    display:     flex;
    align-items: center;
    gap:         12px;
}

.mcc-cliente-activo-nombre strong {
    font-size:      17px;
    letter-spacing: 1.5px;
}

.mcc-cliente-avatar {
    width:           34px;
    height:          34px;
    background:      var(--acento);
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-weight:     700;
    font-size:       15px;
}

.mcc-estado-activo  { color: var(--verde); }
.mcc-estado-pausado { color: var(--amarillo); }
.mcc-estado-cerrado { color: var(--rojo); }

/* ══════════════════════════════════════
   BODY — 3 columnas que llenan la pantalla
══════════════════════════════════════ */
.mcc-body {
    display:               grid;
    grid-template-columns: 1fr 1.3fr 0.9fr;
    gap:                   14px;
    padding:               14px 20px;
    align-items:           start;
    min-height:            calc(100vh - 120px);
}

.mcc-col { display: flex; flex-direction: column; gap: 12px; }

/* ── CARDS ── */
.mcc-card {
    background:    var(--gris);
    border:        1px solid var(--borde);
    border-radius: 10px;
    padding:       14px;
}

.mcc-card-titulo {
    font-size:      10px;
    font-weight:    700;
    letter-spacing: 2.5px;
    color:          var(--texto);
    background:     var(--gris2);
    padding:        6px 12px;
    border-radius:  4px;
    margin-bottom:  14px;
    text-align:     center;
    text-transform: uppercase;
}

/* ── CREATIVIDADES ── */
.mcc-creatividad-label {
    font-size:      9px;
    color:          var(--muted);
    letter-spacing: 1.5px;
    margin-bottom:  4px;
    text-align:     center;
    text-transform: uppercase;
}

.mcc-creatividad-tipo {
    font-size:      11px;
    font-weight:    700;
    letter-spacing: 2px;
    padding:        4px 10px;
    border-radius:  4px;
    text-align:     center;
    margin-bottom:  8px;
}

.mcc-tipo-av { background: #1a3a6b; color: #64b5f6; }
.mcc-tipo-gr { background: #1b5e20; color: #81c784; }
.mcc-tipo-mu { background: #4a148c; color: #ce93d8; }

.mcc-creatividad-nombre {
    font-size:    11px;
    color:        var(--muted);
    text-align:   center;
    margin-bottom: 8px;
}

.mcc-creatividad-preview {
    display:         flex;
    background:      var(--gris2);
    border:          1px solid var(--borde);
    border-radius:   6px;
    height:          130px;
    align-items:     center;
    justify-content: center;
    color:           var(--muted);
    font-size:       13px;
    text-decoration: none;
    margin-bottom:   8px;
    transition:      background 0.15s;
    overflow:        hidden;
}

.mcc-creatividad-preview img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    border-radius: 6px;
}

.mcc-creatividad-preview:hover { background: #2a2a2a; }

.mcc-creatividades-row {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   8px;
    margin-top:            8px;
}

.mcc-creatividad-mini {
    background:    var(--gris2);
    border-radius: 6px;
    padding:       8px;
}

.mcc-creatividad-nombre-mini { font-size: 10px; color: var(--muted); margin: 4px 0; }

.mcc-creatividad-thumb {
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      #252525;
    border-radius:   4px;
    height:          64px;
    color:           var(--muted);
    font-size:       11px;
    text-decoration: none;
    overflow:        hidden;
}

.mcc-creatividad-thumb img {
    width:      100%;
    height:     100%;
    object-fit: cover;
}

.mcc-audio-player {
    display:         flex;
    align-items:     center;
    gap:             6px;
    background:      #252525;
    border-radius:   4px;
    padding:         7px 8px;
    font-size:       11px;
    color:           var(--texto);
    text-decoration: none;
}

.mcc-drive-btn {
    display:         block;
    text-align:      center;
    background:      var(--acento);
    color:           #fff;
    padding:         9px;
    border-radius:   6px;
    font-size:       12px;
    font-weight:     600;
    text-decoration: none;
    margin-top:      12px;
    letter-spacing:  0.5px;
    transition:      opacity 0.15s;
}
.mcc-drive-btn:hover { opacity: 0.88; }

/* ── PAID MEDIA ── */
.mcc-paid-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mcc-paid-label { font-size: 11px; color: var(--muted); text-align: center; margin-bottom: 6px; }
.mcc-paid-placeholder {
    background:    var(--gris2);
    height:        80px;
    border-radius: 6px;
    margin-bottom: 6px;
}
.mcc-paid-metrics div {
    font-size:    11px;
    color:        var(--muted);
    padding:      4px 0;
    border-bottom: 1px solid var(--borde);
    text-align:   center;
}

/* ── PRÓXIMO PASO ── */
.mcc-card-proximo { border-left: 3px solid var(--verde); }
.mcc-proximo-accion {
    background:     var(--verde);
    color:          #000;
    font-size:      14px;
    font-weight:    700;
    padding:        13px;
    border-radius:  6px;
    text-align:     center;
    letter-spacing: 0.5px;
    margin-bottom:  10px;
    line-height:    1.4;
}
.mcc-proximo-fecha {
    font-size:    12px;
    color:        var(--muted);
    text-align:   center;
    margin-bottom: 8px;
}
.mcc-calendar-btn {
    display:         block;
    text-align:      center;
    background:      var(--acento);
    color:           #fff;
    padding:         8px;
    border-radius:   6px;
    font-size:       11px;
    font-weight:     600;
    text-decoration: none;
    letter-spacing:  1px;
    transition:      opacity 0.15s;
}
.mcc-calendar-btn:hover { opacity: 0.88; }

/* ── SOCIAL MEDIA ── */
.mcc-social-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mcc-social-platform {
    font-size:    12px;
    color:        var(--muted);
    text-align:   center;
    margin-bottom: 6px;
    font-weight:  600;
    letter-spacing: 0.5px;
}
.mcc-social-placeholder {
    background:    var(--gris2);
    height:        90px;
    border-radius: 6px;
    margin-bottom: 8px;
    display:       flex;
    align-items:   center;
    justify-content: center;
}
.mcc-social-post {
    display:      block;
    margin-bottom: 8px;
    border-radius: 6px;
    overflow:     hidden;
}
.mcc-social-comentario {
    font-size:    11px;
    color:        var(--muted);
    padding:      4px 7px;
    border:       1px solid var(--borde);
    border-radius: 4px;
    margin-bottom: 3px;
}

/* ── HITOS ── */
.mcc-hitos-label {
    font-size:      10px;
    color:          var(--muted);
    letter-spacing: 1px;
    margin-bottom:  8px;
    text-align:     center;
    text-transform: uppercase;
}
.mcc-hitos-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.mcc-hito {
    font-size:      9px;
    font-weight:    700;
    letter-spacing: 0.5px;
    padding:        9px 6px;
    border-radius:  5px;
    text-align:     center;
    background:     var(--gris2);
    color:          var(--muted);
    border:         1px solid var(--borde);
    line-height:    1.4;
}
.mcc-hito-completado  { background: #1b5e20; color: #81c784; border-color: #2e7d32; }
.mcc-hito-en_progreso { background: #1a3a6b; color: #64b5f6; border-color: #1565c0; }
.mcc-hito-pendiente   { background: var(--gris2); color: var(--muted); }

/* ── ACCIONES ── */
.mcc-card-acciones { display: flex; flex-direction: column; gap: 8px; }
.mcc-accion-btn {
    display:         block;
    text-align:      center;
    background:      var(--gris2);
    color:           var(--texto);
    border:          1px solid var(--borde);
    padding:         11px 12px;
    border-radius:   6px;
    font-size:       11px;
    font-weight:     700;
    letter-spacing:  1px;
    text-decoration: none;
    transition:      background 0.15s, border-color 0.15s;
    cursor:          pointer;
}
.mcc-accion-btn:hover    { background: #2a2a2a; border-color: #444; }
.mcc-accion-urgente      { border-color: var(--rojo); color: #ff8a80; }
.mcc-accion-urgente:hover { background: #1a0000; }

/* ── LISTA DE CLIENTES ── */
.mcc-clientes-lista {
    display:    flex;
    flex-direction: column;
    gap:        3px;
    max-height: 420px;
    overflow-y: auto;
}
.mcc-cliente-item {
    display:         block;
    padding:         7px 10px;
    font-size:       12px;
    color:           #c8d8f0;
    text-decoration: none;
    border-radius:   4px;
    background:      var(--acento);
    transition:      opacity 0.15s;
    font-weight:     500;
}
.mcc-cliente-item:hover { opacity: 0.8; }
.mcc-cliente-activo     { outline: 2px solid #fff; }

/* ── TICKETS ── */
.mcc-ticket-item {
    display:     flex;
    align-items: center;
    gap:         8px;
    padding:     7px 0;
    font-size:   12px;
    border-bottom: 1px solid var(--borde);
}
.mcc-ticket-item:last-child { border-bottom: none; }
.mcc-ticket-tipo {
    font-size:    10px;
    padding:      2px 7px;
    border-radius: 3px;
    background:   var(--gris2);
    color:        var(--muted);
    flex-shrink:  0;
    font-weight:  600;
}
.mcc-ticket-titulo { flex: 1; color: var(--texto); }
.mcc-ticket-estado {
    font-size:   10px;
    padding:     2px 7px;
    border-radius: 3px;
    flex-shrink: 0;
    font-weight: 600;
}
.mcc-ticket-abierto    .mcc-ticket-estado { background: #1a3a6b; color: #64b5f6; }
.mcc-ticket-en_proceso .mcc-ticket-estado { background: #4a3000; color: #ffd54f; }
.mcc-ticket-resuelto   .mcc-ticket-estado { background: #1b5e20; color: #81c784; }

/* ── FORMULARIO TICKETS ── */
.mcc-field { margin-bottom: 14px; }
.mcc-field label {
    display:        block;
    font-size:      10px;
    color:          var(--muted);
    margin-bottom:  5px;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.mcc-field input,
.mcc-field select,
.mcc-field textarea {
    width:         100%;
    background:    var(--gris2);
    border:        1px solid var(--borde);
    border-radius: 6px;
    padding:       9px 13px;
    color:         var(--texto);
    font-size:     13px;
    font-family:   inherit;
    outline:       none;
    transition:    border-color 0.15s;
}
.mcc-field input:focus,
.mcc-field select:focus,
.mcc-field textarea:focus { border-color: var(--acento); }

/* ── RESPONSIVE ── */
@media (max-width: 1100px) {
    .mcc-body { grid-template-columns: 1fr 1fr; }
    .mcc-col-derecha { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
    .mcc-body { grid-template-columns: 1fr; padding: 10px 12px; }
    .mcc-hitos-grid { grid-template-columns: 1fr 1fr; }
    .mcc-header { padding: 8px 14px; gap: 12px; min-height: auto; }
    .mcc-header-logo img { height: 36px !important; }
    .mcc-saludo { font-size: 18px; padding: 10px 14px 0; }
}