/* ================================================================
   MedCompat — feedback.css  (autocontenido)
   Incluye todos los estilos necesarios para el widget y el modal,
   sin depender de clases definidas en otros ficheros CSS.
   ================================================================ */

/* ── Reset crítico: hidden nunca debe ser sobreescrito ────────── */
[hidden] { display: none !important; }


/* ================================================================
   VARIABLES (fallback si el :root principal no las define)
   ================================================================ */
.mc-feedback-trigger,
.mc-modal,
.mc-feedback-form,
.mc-feedback-success,
.mc-filter-bar,
.mc-review-layout,
.mc-review-form {
    --_primary:      var(--mc-color-primary,     #1a4b8f);
    --_primary-dark: var(--mc-color-primary-dark, #133972);
    --_surface:      var(--mc-color-surface,      #ffffff);
    --_bg-alt:       var(--mc-color-bg-alt,       #f5f7fc);
    --_border:       var(--mc-color-border,       #d8e0f0);
    --_text:         var(--mc-color-text,         #1a2340);
    --_muted:        var(--mc-color-text-muted,   #6b7a99);
    --_success:      var(--mc-color-compatible,   #1e9e56);
    --_danger:       #d93025;
    --_radius:       8px;
    --_font:         inherit;
}


/* ================================================================
   BOTÓN DISPARADOR
   ================================================================ */
.mc-feedback-trigger {
    display:      inline-flex;
    align-items:  center;
    gap:          6px;
    padding:      5px 11px;
    font-size:    .78rem;
    font-weight:  500;
    font-family:  var(--_font);
    color:        var(--_muted);
    background:   transparent;
    border:       1px solid var(--_border);
    border-radius: 6px;
    cursor:       pointer;
    transition:   color .15s, border-color .15s, background .15s;
    white-space:  nowrap;
    line-height:  1.4;
}
.mc-feedback-trigger svg { width: 15px; height: 15px; flex-shrink: 0; }
.mc-feedback-trigger:hover {
    color:        var(--_primary);
    border-color: var(--_primary);
    background:   rgba(26, 75, 143, .06);
}


/* ================================================================
   MODAL — backdrop + panel
   ================================================================ */
.mc-modal {
    position:        fixed;
    inset:           0;
    z-index:         1000;
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         16px;
}

.mc-modal__backdrop {
    position:   absolute;
    inset:      0;
    background: rgba(10, 20, 48, .55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    cursor:     pointer;
}

.mc-modal__panel {
    position:       relative;
    z-index:        1;
    background:     var(--_surface);
    border-radius:  12px;
    box-shadow:     0 20px 60px rgba(10, 20, 48, .22);
    width:          100%;
    max-width:      540px;
    max-height:     90vh;
    display:        flex;
    flex-direction: column;
    overflow:       hidden;
    font-family:    var(--_font);
    color:          var(--_text);
}

body.mc-modal-open { overflow: hidden; }


/* ── Cabecera ────────────────────────────────────────────────── */
.mc-modal__header {
    display:       flex;
    align-items:   flex-start;
    gap:           12px;
    padding:       18px 22px 14px;
    border-bottom: 1px solid var(--_border);
    flex-shrink:   0;
    background:    var(--_surface);
}
.mc-modal__title {
    flex:        1;
    margin:      0;
    font-size:   .98rem;
    font-weight: 600;
    color:       var(--_text);
    line-height: 1.4;
    display:     flex;
    align-items: center;
    gap:         8px;
}
.mc-modal__title svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--_primary); }
.mc-modal__title em { font-style: normal; color: var(--_primary); }

.mc-modal__close {
    flex-shrink:     0;
    width:           30px;
    height:          30px;
    border:          none;
    background:      none;
    font-size:       1.35rem;
    line-height:     1;
    color:           var(--_muted);
    cursor:          pointer;
    border-radius:   6px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    transition:      background .15s, color .15s;
    padding:         0;
}
.mc-modal__close:hover { background: var(--_bg-alt); color: var(--_text); }


/* ── Cuerpo ──────────────────────────────────────────────────── */
.mc-modal__body {
    padding:    20px 22px;
    overflow-y: auto;
    flex:       1;
}
.mc-modal__intro {
    margin:      0 0 18px;
    font-size:   .86rem;
    color:       var(--_muted);
    line-height: 1.5;
}


/* ================================================================
   COMPONENTES DE FORMULARIO (autocontenidos dentro del modal)
   ================================================================ */

/* Grupo: label ENCIMA del campo */
.mc-modal .mc-form-group {
    display:        flex;
    flex-direction: column;
    gap:            5px;
}

/* Etiqueta */
.mc-modal .mc-label {
    font-size:   .82rem;
    font-weight: 600;
    color:       var(--_text);
    line-height: 1.3;
    display:     block;
}
.mc-modal .mc-label--required::after { content: ' *'; color: var(--_danger); }
.mc-modal .mc-label__optional { font-weight: 400; color: var(--_muted); font-size: .78rem; }

/* Campos */
.mc-modal .mc-input,
.mc-modal .mc-select,
.mc-modal .mc-textarea {
    width:          100%;
    padding:        9px 11px;
    font-size:      .875rem;
    font-family:    var(--_font);
    color:          var(--_text);
    background:     var(--_surface);
    border:         1.5px solid var(--_border);
    border-radius:  var(--_radius);
    box-sizing:     border-box;
    transition:     border-color .15s, box-shadow .15s;
    appearance:     none;
    -webkit-appearance: none;
    outline:        none;
    line-height:    1.4;
}
.mc-modal .mc-select {
    background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7a99' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat:   no-repeat;
    background-position: right 10px center;
    padding-right:       30px;
    cursor:              pointer;
}
.mc-modal .mc-textarea { resize: vertical; min-height: 92px; }
.mc-modal .mc-input:focus,
.mc-modal .mc-select:focus,
.mc-modal .mc-textarea:focus {
    border-color: var(--_primary);
    box-shadow:   0 0 0 3px rgba(26, 75, 143, .12);
}
.mc-modal .mc-input::placeholder,
.mc-modal .mc-textarea::placeholder { color: #b0bbcc; }

/* Hint */
.mc-modal .mc-form-hint { font-size: .76rem; color: var(--_muted); }

/* Alerta de error */
.mc-modal .mc-alert--danger {
    padding:       9px 13px;
    border-radius: var(--_radius);
    background:    #fdecea;
    border:        1px solid #f5c6c2;
    color:         var(--_danger);
    font-size:     .84rem;
    line-height:   1.4;
}


/* ── details/summary ─────────────────────────────────────────── */
.mc-modal .mc-details {
    border:        1.5px solid var(--_border);
    border-radius: var(--_radius);
    overflow:      hidden;
}
.mc-modal .mc-details__summary {
    padding:     9px 14px;
    cursor:      pointer;
    font-size:   .82rem;
    font-weight: 500;
    color:       var(--_muted);
    background:  var(--_bg-alt);
    user-select: none;
    list-style:  none;
    display:     flex;
    align-items: center;
    gap:         6px;
}
.mc-modal .mc-details__summary::-webkit-details-marker { display: none; }
.mc-modal .mc-details__summary::before { content: '▸'; font-size: .72em; transition: transform .2s; flex-shrink: 0; }
.mc-modal details[open] .mc-details__summary::before { transform: rotate(90deg); }
.mc-modal .mc-details__body {
    padding:        14px;
    display:        flex;
    flex-direction: column;
    gap:            12px;
    background:     var(--_surface);
}

/* Fila de dos columnas */
.mc-modal .mc-form-row {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   12px;
}
@media (max-width: 480px) {
    .mc-modal .mc-form-row { grid-template-columns: 1fr; }
}

/* Formulario: gap entre grupos */
.mc-feedback-form {
    display:        flex;
    flex-direction: column;
    gap:            14px;
}

/* Pie */
.mc-modal__footer {
    display:         flex;
    justify-content: flex-end;
    align-items:     center;
    gap:             10px;
    margin-top:      6px;
    padding-top:     16px;
    border-top:      1px solid var(--_border);
}


/* ── Botones (autocontenidos dentro del modal) ───────────────── */
.mc-modal .mc-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             6px;
    padding:         9px 18px;
    font-size:       .875rem;
    font-weight:     600;
    font-family:     var(--_font);
    border-radius:   var(--_radius);
    border:          1.5px solid transparent;
    cursor:          pointer;
    text-decoration: none;
    transition:      background .15s, border-color .15s, color .15s, opacity .15s;
    white-space:     nowrap;
    line-height:     1.2;
}
.mc-modal .mc-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.mc-modal .mc-btn:disabled { opacity: .55; cursor: not-allowed; }

.mc-modal .mc-btn--primary {
    background:   var(--_primary);
    color:        #fff;
    border-color: var(--_primary);
}
.mc-modal .mc-btn--primary:not(:disabled):hover {
    background:   var(--_primary-dark);
    border-color: var(--_primary-dark);
}
.mc-modal .mc-btn--ghost {
    background:   transparent;
    color:        var(--_muted);
    border-color: var(--_border);
}
.mc-modal .mc-btn--ghost:not(:disabled):hover {
    background:   var(--_bg-alt);
    color:        var(--_text);
    border-color: #b8c4d8;
}


/* ================================================================
   ESTADO DE ÉXITO
   ================================================================ */
.mc-feedback-success {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            10px;
    padding:        28px 16px 8px;
    text-align:     center;
}
.mc-feedback-success svg { width: 52px; height: 52px; color: var(--_success); }
.mc-feedback-success p { margin: 0; font-size: 1rem; font-weight: 600; color: var(--_text); }
.mc-feedback-success__sub {
    font-weight: 400 !important;
    font-size:   .86rem !important;
    color:       var(--_muted) !important;
    line-height: 1.5;
}


/* ================================================================
   VISTAS ADMIN — list + detail
   ================================================================ */
.mc-filter-bar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.mc-filter-bar__item {
    padding:         5px 14px;
    border-radius:   20px;
    font-size:       .82rem;
    font-weight:     500;
    color:           var(--_muted);
    border:          1px solid var(--_border);
    text-decoration: none;
    transition:      all .15s;
}
.mc-filter-bar__item:hover,
.mc-filter-bar__item--active { background: var(--_primary); color: #fff; border-color: var(--_primary); }

.mc-table__row--highlight             { background: rgba(255,180,0,.06); }
.mc-table__row--highlight:hover       { background: rgba(255,180,0,.11); }
.mc-table__description                { max-width: 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.mc-review-layout                     { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; }
@media (max-width: 900px)             { .mc-review-layout { grid-template-columns: 1fr; } }
.mc-review-layout__sidebar            { display: flex; flex-direction: column; gap: 16px; }
.mc-review-form                       { display: flex; flex-direction: column; gap: 14px; }
.mc-review-form__actions              { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.mc-card--action .mc-card__links      { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }

.mc-detail-list__reference {
    font-family:   monospace;
    font-size:     .85rem;
    background:    var(--_bg-alt);
    padding:       8px 12px;
    border-radius: 6px;
    border-left:   3px solid var(--_primary);
    word-break:    break-word;
}