/* Paneles y acciones tipo ficha clínica — uso global en webmysql */

.ficha-acciones-burbujas-grid {
    align-items: start;
    display: grid;
    gap: var(--guachero-burbuja-gap, 0.55rem);
    grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
    justify-content: start;
}

.ficha-acciones-burbujas-grid.grid-compacto {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

/* Formularios operativos: una columna, ancho completo */
.ficha-formularios-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ficha-formularios-stack .ficha-panel-burbuja,
.ficha-formularios-stack .ficha-accion-burbuja {
    width: 100%;
}

.ficha-panel-burbuja-cuerpo > .row,
.ficha-accion-burbuja-cuerpo > .row {
    --bs-gutter-x: 1rem;
    margin-left: calc(var(--bs-gutter-x) * -0.5);
    margin-right: calc(var(--bs-gutter-x) * -0.5);
    width: calc(100% + var(--bs-gutter-x));
}

.ficha-panel-burbuja-cuerpo .table-wrap,
.ficha-panel-burbuja-cuerpo .table-responsive {
    max-width: 100%;
    overflow-x: auto;
}

.ficha-accion-burbuja,
.ficha-panel-burbuja {
    background: #fff;
    border: 2px solid rgba(15, 23, 42, 0.08);
    border-radius: var(--guachero-burbuja-radius, 0.85rem);
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.07);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    max-width: 100%;
    min-height: 0;
    padding: 0.65rem 0.7rem 0.75rem;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.ficha-panel-burbuja {
    padding: 0.75rem 0.85rem 0.9rem;
    width: 100%;
}

.ficha-panel-burbuja.mb-section,
.ficha-accion-burbuja.mb-section {
    margin-bottom: 1rem;
}

.ficha-accion-burbuja:hover {
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
    transform: translateY(-2px);
}

.ficha-panel-burbuja:hover {
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.1);
}

/* Temas acción (ficha clínica) */
.ficha-accion-burbuja.tema-alimentacion,
.ficha-panel-burbuja.tema-alimentacion {
    background: #eff6ff;
    border-color: rgba(13, 110, 253, 0.28);
}

.ficha-accion-burbuja.tema-peso,
.ficha-panel-burbuja.tema-peso {
    background: #ecfeff;
    border-color: rgba(13, 202, 240, 0.35);
}

.ficha-accion-burbuja.tema-identificacion,
.ficha-panel-burbuja.tema-identificacion {
    background: #ecfdf5;
    border-color: rgba(25, 135, 84, 0.3);
}

.ficha-accion-burbuja.tema-recria,
.ficha-panel-burbuja.tema-recria {
    background: #f0fdf4;
    border-color: rgba(34, 197, 94, 0.32);
}

.ficha-accion-burbuja.tema-nota,
.ficha-panel-burbuja.tema-nota {
    background: #fffbeb;
    border-color: rgba(255, 193, 7, 0.35);
}

.ficha-accion-burbuja.tema-modulos,
.ficha-panel-burbuja.tema-modulos {
    background: #f8fafc;
    border-color: rgba(100, 116, 139, 0.28);
}

/* Temas panel generales */
.ficha-panel-burbuja.tema-foto,
.ficha-panel-burbuja.tema-neutral {
    background: #f8fafc;
    border-color: rgba(100, 116, 139, 0.28);
}

.ficha-panel-burbuja.tema-datos,
.ficha-panel-burbuja.tema-success,
.ficha-panel-burbuja.tema-sanidad {
    background: #ecfdf5;
    border-color: rgba(25, 135, 84, 0.3);
}

.ficha-panel-burbuja.tema-estado,
.ficha-panel-burbuja.tema-primary {
    background: #eff6ff;
    border-color: rgba(13, 110, 253, 0.28);
}

.ficha-panel-burbuja.tema-historial,
.ficha-panel-burbuja.tema-info {
    background: #ecfeff;
    border-color: rgba(13, 202, 240, 0.35);
}

.ficha-panel-burbuja.tema-tareas,
.ficha-panel-burbuja.tema-warning {
    background: #fffbeb;
    border-color: rgba(255, 193, 7, 0.35);
}

.ficha-panel-burbuja.tema-alertas,
.ficha-panel-burbuja.tema-danger,
.ficha-accion-burbuja.tema-danger {
    background: #fef2f2;
    border-color: rgba(220, 53, 69, 0.32);
}

.ficha-panel-burbuja.tema-secondary,
.ficha-panel-burbuja.tema-filtros,
.ficha-panel-burbuja.tema-admin {
    background: #f8fafc;
    border-color: rgba(108, 117, 125, 0.28);
}

.ficha-panel-burbuja.tema-movimiento,
.ficha-accion-burbuja.tema-movimiento {
    background: #eff6ff;
    border-color: rgba(13, 110, 253, 0.28);
}

.ficha-panel-burbuja.tema-venta,
.ficha-accion-burbuja.tema-venta {
    background: #ecfdf5;
    border-color: rgba(25, 135, 84, 0.3);
}

.ficha-panel-burbuja.tema-muerte,
.ficha-accion-burbuja.tema-muerte {
    background: #f1f5f9;
    border-color: rgba(33, 37, 41, 0.28);
}

.ficha-panel-burbuja-titulo-badge {
    margin-left: auto;
}

.ficha-accion-burbuja-titulo,
.ficha-panel-burbuja-titulo {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    font-size: 0.82rem;
    font-weight: 700;
    gap: 0.35rem;
    line-height: 1.2;
    margin: 0;
}

.ficha-panel-burbuja-titulo {
    font-size: 0.95rem;
}

.ficha-accion-burbuja-meta,
.ficha-panel-burbuja-meta {
    color: #475569;
    font-size: var(--guachero-burbuja-meta, 0.64rem);
    line-height: 1.25;
    margin: 0;
    word-break: break-word;
}

.ficha-panel-burbuja-meta.text-muted-small {
    color: #64748b;
    font-size: 0.72rem;
}

.ficha-accion-burbuja-cuerpo,
.ficha-panel-burbuja-cuerpo {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.ficha-panel-burbuja-cuerpo > :last-child {
    margin-bottom: 0;
}

.ficha-panel-burbuja-cuerpo p {
    margin-bottom: 0.55rem;
}

.ficha-panel-burbuja-cuerpo p:last-child {
    margin-bottom: 0;
}

.ficha-accion-burbuja-cuerpo .form-control,
.ficha-accion-burbuja-cuerpo .form-select,
.ficha-panel-burbuja-cuerpo .form-control,
.ficha-panel-burbuja-cuerpo .form-select {
    font-size: 0.88rem;
}

.ficha-accion-burbuja-modulos {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.ficha-accion-burbuja-modulos .btn {
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.28rem 0.65rem;
}

.ficha-kpi-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}

.ficha-kpi-burbuja {
    background: #fff;
    border: 2px solid rgba(15, 23, 42, 0.08);
    border-radius: var(--guachero-burbuja-radius, 0.85rem);
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.07);
    padding: 0.75rem 0.85rem;
    text-align: center;
}

.ficha-kpi-burbuja .ficha-kpi-valor {
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.1;
}

.ficha-kpi-burbuja .ficha-kpi-etiqueta {
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 600;
    margin-top: 0.25rem;
}

.ficha-acciones-panel.ficha-panel-burbuja {
    gap: 0;
    padding-bottom: 0.65rem;
}

.ficha-acciones-panel .ficha-acciones-details {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.ficha-acciones-panel .ficha-acciones-summary {
    cursor: pointer;
    list-style: none;
    margin: 0;
    width: 100%;
}

.ficha-acciones-panel .ficha-acciones-summary::-webkit-details-marker {
    display: none;
}

.ficha-acciones-panel .ficha-acciones-chevron {
    margin-left: auto;
}

.ficha-accion-burbuja.text-decoration-none {
    color: inherit;
}

.ficha-accion-burbuja.text-decoration-none:hover {
    color: inherit;
}

@media print {
    .ficha-panel-burbuja,
    .ficha-panel-burbuja-cuerpo {
        overflow: visible !important;
        max-height: none !important;
        height: auto !important;
    }

    .ficha-panel-burbuja {
        break-inside: avoid;
        box-shadow: none !important;
        border: 1px solid #ddd !important;
    }
}