/* ============================================================================
   Ficha de Mascota — componente global (Swal) · estilos scoped al prefijo fm-
   Estilo sobrio calcado del modal de insumos del workspace (ws-insumo-*).
   Doc: mascotasCliente/_DOC_ficha_mascota.md
   ========================================================================== */

.fm-popup {
    padding: 0 !important;
    width: 680px !important;
    max-width: 95vw !important;
    border-radius: 12px !important;
    overflow: visible !important;
}

.fm-popup .swal2-html-container {
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    overflow: visible !important;
}

.fm-popup .swal2-title {
    padding: 18px 20px 0;
    font-size: 1.15rem;
    text-align: left;
    text-transform: capitalize;
}

.fm-modal {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.fm-modal-cuerpo {
    padding: 14px 20px 18px;
}

/* Submeta: tutor + estado, en una línea discreta */
.fm-submeta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    font-size: 0.82rem;
    color: #6b7280;
}

.fm-badge {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.fm-badge--activo {
    background: #e6f6ec;
    color: #1e7e44;
}

.fm-badge--fallecido {
    background: #f1f3f5;
    color: #6c757d;
}

/* Grilla de campos */
.fm-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px 14px;
}

.fm-field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.fm-field--full {
    grid-column: 1 / -1;
}

.fm-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    color: #6b7280;
    font-weight: 600;
    letter-spacing: 0.04em;
    margin-bottom: 5px;
}

.fm-req {
    color: #e53e3e;
}

.fm-field input,
.fm-field select {
    height: 36px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 0 10px;
    font-size: 0.88rem;
    color: #1f2937;
    background: #fff;
    width: 100%;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.fm-field input:focus,
.fm-field select:focus {
    outline: none;
    border-color: #1a6fc4;
    box-shadow: 0 0 0 3px rgba(26, 111, 196, .12);
}

.fm-field input:disabled,
.fm-field select:disabled,
.fm-field input[readonly] {
    background: #f9fafb;
    color: #6b7280;
    cursor: not-allowed;
}

/* Sección de categorías dinámicas */
.fm-section-title {
    grid-column: 1 / -1;
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid #e5e7eb;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6b7280;
}

.fm-extras {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.fm-chip {
    font-size: 0.72rem;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    color: #6b7280;
    border-radius: 999px;
    padding: 3px 10px;
}

.fm-chip strong {
    color: #1f2937;
    text-transform: capitalize;
}

/* Alerta inline (errores de guardado) */
.fm-alert {
    grid-column: 1 / -1;
    display: none;
    margin-top: 4px;
    padding: 8px 12px;
    border-radius: 6px;
    background: #fdecea;
    border: 1px solid #f5c6cb;
    color: #a12622;
    font-size: 0.82rem;
}

.fm-alert.activo {
    display: block;
}

/* Pie con botones propios (calco ws-insumo-modal-pie) */
.fm-modal-pie {
    padding: 12px 20px;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

.fm-btn-cancelar {
    background: transparent;
    color: #6b7280;
    border: 1px solid #d1d5db;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.fm-btn-cancelar:hover,
.fm-btn-cancelar:focus {
    background: #f3f4f6;
    color: #1f2937;
    border-color: #9ca3af;
    outline: none;
}

.fm-btn-guardar {
    background: #1a6fc4;
    color: #fff;
    border: 1px solid #1a6fc4;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.fm-btn-guardar:hover,
.fm-btn-guardar:focus {
    background: #145390;
    border-color: #145390;
    outline: none;
    box-shadow: 0 2px 6px -1px rgba(20, 83, 144, 0.35);
}

.fm-btn-guardar:disabled,
.fm-btn-guardar[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
    box-shadow: none;
}

/* Estado de carga/error inicial */
.fm-state {
    padding: 36px 20px;
    text-align: center;
    color: #6b7280;
    font-size: 0.88rem;
}

@media (max-width: 575px) {
    .fm-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}