/* =============================================================================
   flujos.css — Atajos para hacer las cosas en menos pasos
   (toast con acción, cerrar atención, horarios, presupuesto)
   ============================================================================= */

.feedback-toast-action {
    align-self: center;
    margin-left: auto;
    padding: 0.4rem 0.75rem;
    border-radius: 0.6rem;
    border: 0;
    background: var(--primary-600, #0d9488);
    color: #fff;
    font-weight: 600;
    font-size: 0.85rem;
    white-space: nowrap;
    cursor: pointer;
}

/* Cerrar atención */
.modal-atencion .atencion-paciente { margin: 0 0 0.25rem; }
.modal-atencion .atencion-cobertura { margin: 0 0 1rem; color: var(--gray-600, #475569); font-size: 0.9rem; }
.atencion-renglon {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: flex-end;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    border: 1px solid var(--gray-200, #e2e8f0);
    border-radius: 0.75rem;
}
.atencion-renglon .atencion-prestacion { flex: 1 1 220px; min-width: 0; margin: 0; }
.atencion-renglon .atencion-pieza,
.atencion-renglon .atencion-caras { flex: 0 0 80px; margin: 0; }
.atencion-renglon .atencion-autorizacion { flex: 0 1 140px; margin: 0; }
.atencion-renglon .atencion-cobro { flex: 1 1 100%; margin: 0; }
.atencion-resumen {
    margin-top: 0.75rem;
    padding: 0.75rem;
    border-radius: 0.75rem;
    background: var(--gray-50, #f8fafc);
    font-size: 0.9rem;
}

/* Horarios: atajos y ausencias */
.schedule-atajos { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.75rem; }
.schedule-ausencias { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--gray-200, #e2e8f0); }
.schedule-ausencias h4 { margin: 0 0 0.25rem; font-size: 0.95rem; }
.schedule-ausencias-lista { list-style: none; padding: 0; margin: 0.5rem 0; }
.schedule-ausencia { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; padding: 0.25rem 0; }
.schedule-ausencia-form { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: flex-end; }
.schedule-ausencia-form .input-group { flex: 1 1 130px; margin: 0; }

/* Presupuesto: renglones con catálogo */
.budget-item-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; align-items: center; }
.budget-item-row .bg-item-proc { flex: 2 1 160px; min-width: 0; }
.budget-item-row .bg-item-desc { flex: 3 1 180px; min-width: 0; }
.budget-item-row .bg-item-qty { flex: 0 0 64px; }
.budget-item-row .bg-item-price { flex: 0 0 110px; }
.budget-item-acciones { display: flex; flex-wrap: wrap; gap: 0.5rem; }

body.theme-dark .atencion-resumen { background: rgba(255, 255, 255, 0.05); }
body.theme-dark .atencion-renglon,
body.theme-dark .schedule-ausencias { border-color: rgba(255, 255, 255, 0.1); }

/* Agenda: turno cancelado al costado del turno que ocupa su horario
   (ver carrilDe en appointments.js). El vigente deja libre la franja derecha. */
.cal-apt-block.cal-apt-deja-carril {
    right: calc(28% + 4px) !important;
}
.cal-apt-block.cal-apt-carril-cancelado {
    left: auto !important;
    right: 3px !important;
    width: calc(28% - 2px) !important;
    z-index: 1 !important;
    padding-left: 0.35rem !important;
    padding-right: 0.3rem !important;
}
/* En la franja angosta sólo va el nombre tachado: la hora es la misma que la
   del turno de al lado, y con la etiqueta no entraba en un turno de 30 min. */
.cal-apt-block.cal-apt-carril-cancelado .cal-apt-meta { display: none !important; }
.cal-apt-block.cal-apt-carril-cancelado .cal-apt-content {
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    width: 100%;
    gap: 0 !important;
}
/* patches.css le da al nombre flex: 1 !important para la fila; en columna
   eso lo dejaba de 2px de alto. */
.cal-apt-block.cal-apt-carril-cancelado .cal-apt-content > * {
    flex: 0 0 auto !important;
    margin-left: 0 !important;
}
.cal-apt-block.cal-apt-carril-cancelado .cal-apt-name {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Recetas frecuentes: atajos encima del Rp */
.rx-frecuentes-lista { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.rx-frecuente {
    border: 1px solid var(--gray-200, #e2e8f0);
    background: var(--gray-50, #f8fafc);
    border-radius: 999px;
    padding: 0.3rem 0.7rem;
    font-size: 0.82rem;
    cursor: pointer;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rx-frecuente:hover { border-color: var(--primary-400, #2dd4bf); }
.rx-frecuente-veces { color: var(--gray-500, #64748b); font-size: 0.75rem; }
body.theme-dark .rx-frecuente { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.12); color: inherit; }

/* Insumos: cargar compra */
.compra-tabla-wrap { max-height: 50vh; overflow-y: auto; border: 1px solid var(--gray-200, #e2e8f0); border-radius: 0.75rem; }
.compra-tabla td, .compra-tabla th { padding: 0.4rem 0.6rem; }
.compra-tabla .compra-cat th { background: var(--gray-50, #f8fafc); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; position: sticky; top: 0; }
.compra-tabla .compra-cantidad { width: 90px; display: inline-block; }
body.theme-dark .compra-tabla-wrap { border-color: rgba(255,255,255,0.1); }
body.theme-dark .compra-tabla .compra-cat th { background: #1e293b; }

/* Primeros pasos de una clínica nueva (dashboard) */
.primeros-pasos { padding: 1rem 1.25rem; margin-bottom: 1rem; border-left: 4px solid var(--primary-600, #0d9488); }
.primeros-pasos-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.primeros-pasos-header h3 { margin: 0; font-size: 1rem; }
.primeros-pasos-lista { list-style: none; padding: 0; margin: 0.75rem 0 0; display: grid; gap: 0.4rem; }
.primeros-pasos-lista li { display: flex; align-items: center; gap: 0.6rem; }
.primeros-pasos-lista li.is-hecho { color: var(--gray-500, #64748b); text-decoration: line-through; }
.primeros-pasos-lista li.is-hecho i { color: #16a34a; }
.primeros-pasos-ir { background: none; border: 0; padding: 0; color: var(--primary-700, #0f766e); font-weight: 600; cursor: pointer; text-align: left; }
.primeros-pasos-ir:hover { text-decoration: underline; }
body.theme-dark .primeros-pasos-ir { color: #5eead4; }

/* Dashboard 1201-1366: la columna Hora mide 4.6rem (patches.css, "Turnos de
   hoy") pero "08:00 (15m)" en una línea mide más y se montaba sobre el nombre
   del paciente. Debajo de 1200 ya bajaba la duración de renglón; acá también. */
@media screen and (min-width: 1201px) and (max-width: 1366px) {
    .dashboard-appointments-table .dashboard-appointment-time,
    .dashboard-appointments-table .dashboard-appointment-duration { display: block; }
}

/* Detalle del turno: recuadro para avisar por WhatsApp (recordatorio y
   confirmación). Tono WhatsApp con un degradé suave; la confirmación va en
   verde macizo porque es la acción principal, el recordatorio en contorno. */
.apt-view-mensajes {
    margin-top: 1.1rem;
    padding: 0.85rem 1rem;
    border-radius: 1rem;
    background: linear-gradient(135deg, rgba(37, 211, 102, 0.1), rgba(37, 211, 102, 0.04));
    border: 1px solid rgba(37, 211, 102, 0.28);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.apt-view-mensajes-titulo {
    font-weight: 700;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: #0f7a3d;
}
.apt-view-mensajes-icono {
    width: 1.65rem;
    height: 1.65rem;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    box-shadow: 0 2px 6px rgba(37, 211, 102, 0.4);
    flex-shrink: 0;
}
.apt-view-mensajes-botones { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.apt-wa-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    white-space: nowrap;
    padding: 0.5rem 0.95rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: transform 0.1s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.apt-wa-btn:active { transform: translateY(1px); }
.apt-wa-btn-ghost {
    background: #fff;
    color: #0f7a3d;
    border-color: rgba(37, 211, 102, 0.4);
}
.apt-wa-btn-ghost:hover { background: rgba(37, 211, 102, 0.08); }
.apt-wa-btn-solid {
    background: #25d366;
    color: #fff;
    box-shadow: 0 2px 8px rgba(37, 211, 102, 0.35);
}
.apt-wa-btn-solid:hover { background: #1db954; box-shadow: 0 4px 12px rgba(37, 211, 102, 0.45); }

@media (max-width: 480px) {
    .apt-view-mensajes { flex-direction: column; align-items: stretch; }
    .apt-view-mensajes-botones { width: 100%; }
    .apt-wa-btn { flex: 1 1 auto; justify-content: center; }
}

body.theme-dark .apt-view-mensajes {
    background: linear-gradient(135deg, rgba(37, 211, 102, 0.14), rgba(37, 211, 102, 0.05));
    border-color: rgba(74, 222, 128, 0.3);
}
body.theme-dark .apt-view-mensajes-titulo { color: #6ee7a8; }
body.theme-dark .apt-wa-btn-ghost { background: rgba(255, 255, 255, 0.04); color: #6ee7a8; border-color: rgba(74, 222, 128, 0.35); }
body.theme-dark .apt-wa-btn-ghost:hover { background: rgba(74, 222, 128, 0.12); }

/* Avisos (toasts): × para cerrarlos sin esperar */
.feedback-toast { position: relative; }
.feedback-toast-copy { flex: 1 1 auto; min-width: 0; padding-right: 0.25rem; }
.feedback-toast-close {
    flex: 0 0 auto;
    align-self: flex-start;
    width: 1.75rem;
    height: 1.75rem;
    margin: -0.25rem -0.4rem 0 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--gray-500, #64748b);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.feedback-toast-close:hover { background: rgba(0, 0, 0, 0.06); color: var(--gray-800, #1e293b); }
body.theme-dark .feedback-toast-close { color: #94a3b8; }
body.theme-dark .feedback-toast-close:hover { background: rgba(255, 255, 255, 0.08); color: #e2e8f0; }

/* Configuración → Mensajes de WhatsApp: pestañas, editor y vista al lado */
.msg-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-bottom: 1rem; }
.msg-tab {
    display: flex; align-items: center; gap: 0.7rem; text-align: left;
    padding: 0.75rem 0.9rem; border-radius: 0.9rem; cursor: pointer;
    border: 1px solid var(--gray-200, #e2e8f0); background: var(--gray-50, #f8fafc); color: inherit;
}
.msg-tab i { font-size: 1.1rem; color: var(--gray-500, #64748b); }
.msg-tab span { display: flex; flex-direction: column; line-height: 1.2; }
.msg-tab small { color: var(--gray-500, #64748b); font-size: 0.78rem; }
.msg-tab.is-active { border-color: #16a34a; background: rgba(22, 163, 74, 0.07); box-shadow: 0 0 0 1px #16a34a inset; }
.msg-tab.is-active i { color: #16a34a; }
.msg-cuando { margin: 0 0 0.75rem; font-size: 0.86rem; color: var(--gray-600, #475569); display: flex; gap: 0.45rem; align-items: flex-start; }
.msg-cuando i { margin-top: 0.15rem; }
.msg-editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.msg-editor-texto label { display: block; font-weight: 600; font-size: 0.85rem; margin-bottom: 0.4rem; }
.msg-editor-texto .msg-token-row { margin-bottom: 0.5rem; }
.msg-config .msg-token { font-family: inherit; font-weight: 600; }
.msg-config .msg-token i { font-size: 0.7rem; margin-right: 0.15rem; }
.msg-config .msg-texto { width: 100%; font-family: inherit; line-height: 1.5; resize: vertical; min-height: 9rem; }
.msg-pie { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin-top: 0.35rem; flex-wrap: wrap; }
.msg-editor-vista {
    background: #e5ddd5; /* fondo de chat de WhatsApp */
    border-radius: 0.9rem; padding: 0.9rem; min-height: 100%;
}
.msg-vista-titulo { display: block; font-size: 0.75rem; font-weight: 600; color: #54656f; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.04em; }
.msg-config .msg-burbuja {
    background: #dcf8c6; border: 0; border-radius: 0.6rem 0.6rem 0.6rem 0.15rem;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12); color: #111b21; max-width: 92%;
}
@media (max-width: 760px) {
    .msg-editor { grid-template-columns: 1fr; }
}
body.theme-dark .msg-tab { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.1); }
body.theme-dark .msg-tab.is-active { background: rgba(74, 222, 128, 0.08); border-color: #4ade80; box-shadow: 0 0 0 1px #4ade80 inset; }
body.theme-dark .msg-editor-vista { background: #0b141a; }
body.theme-dark .msg-vista-titulo { color: #8696a0; }
body.theme-dark .msg-config .msg-burbuja { background: #005c4b; color: #e9edef; }

/* Agenda: profesional que no atiende ese día pero tiene turnos dados */
.cal-aviso-sin-atencion {
    display: flex; gap: 0.75rem; align-items: flex-start;
    margin: 0 0 0.75rem; padding: 0.75rem 1rem; border-radius: 0.9rem;
    background: #fff7ed; border: 1px solid #fdba74; color: #9a3412;
}
.cal-aviso-sin-atencion > i { margin-top: 0.2rem; }
.cal-aviso-sin-atencion p { margin: 0; }
.cal-aviso-sin-atencion p + p { margin-top: 0.2rem; }
.cal-prof-schedule-badge.cal-prof-sin-atencion { background: #ffedd5 !important; color: #9a3412 !important; border-color: #fdba74 !important; }
.cal-prof-body-sin-atencion {
    background-image: repeating-linear-gradient(135deg, rgba(234, 88, 12, 0.06) 0 10px, transparent 10px 20px);
}
.cal-month-summary-card.cal-month-a-mover { background: #ffedd5 !important; color: #9a3412 !important; border-color: #fdba74 !important; }
body.theme-dark .cal-aviso-sin-atencion { background: rgba(234, 88, 12, 0.12); border-color: rgba(251, 146, 60, 0.4); color: #fdba74; }
body.theme-dark .cal-prof-schedule-badge.cal-prof-sin-atencion,
body.theme-dark .cal-month-summary-card.cal-month-a-mover { background: rgba(234, 88, 12, 0.18) !important; color: #fdba74 !important; border-color: rgba(251, 146, 60, 0.4) !important; }

/* Ficha → Presupuestos: las dos tablas (presupuestos y movimientos) se rompían
   en pantallas anchas. Las columnas se repartían en partes iguales y las
   celdas no podían partir renglón (table-nowrap): el concepto se montaba sobre
   el monto y las acciones se salían de la tarjeta, con "Cargar deuda" cortado.
   Ahora las columnas cortas (fecha, monto, estado, acciones) miden lo que su
   contenido y el texto libre (título, concepto) se queda con el resto y baja
   de renglón. En celular siguen siendo tarjetas (patches.css, <= 640px). */
@media screen and (min-width: 641px) {
    .table-container table.clinical-budgets-table,
    .table-container table.clinical-account-table {
        table-layout: auto !important;
        width: 100% !important;
        min-width: 0 !important;
    }
    .table-container table.clinical-budgets-table td,
    .table-container table.clinical-account-table td {
        white-space: normal !important;
        overflow-wrap: break-word;
        word-break: normal;
    }
    .table-container table.clinical-budgets-table td[data-label="Fecha"],
    .table-container table.clinical-budgets-table .clinical-budget-total,
    .table-container table.clinical-budgets-table .clinical-budget-status,
    .table-container table.clinical-account-table td[data-label="Fecha"],
    .table-container table.clinical-account-table td[data-label="Tipo"],
    .table-container table.clinical-account-table td[data-label="Monto"] {
        white-space: nowrap !important;
        width: 1%;
    }
    .table-container table.clinical-budgets-table td.clinical-budget-actions {
        white-space: nowrap !important;
        width: 1% !important;
    }
}

/* Historial de turnos: el estado literal, y "Hoy" al lado cuando corresponde */
.historial-turno-estados { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.3rem; }

/* Dashboard en pantallas angostas (<=900): una sola columna de acciones con
   presencia, confirmación editable y WhatsApp apilados y a todo el ancho. Antes
   sólo mostraba una etiqueta y no se podía operar desde el celular. */
.dashboard-compact-actions { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.dashboard-compact-row { min-width: 0; }
.dashboard-compact-row .presence-btn,
.dashboard-compact-row .status-dropdown,
.dashboard-compact-row .status-dropdown-trigger,
.dashboard-compact-row .dashboard-wa-btn,
.dashboard-compact-row .wa-sent-badge {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center;
}
/* En la columna compacta el texto de WhatsApp sí se muestra (hay lugar al ir
   apilado), al revés que en la columna angosta de solo-ícono. */
.dashboard-compact-row .dashboard-wa-btn .wa-btn-texto,
.dashboard-compact-row .wa-sent-badge .wa-btn-texto { display: inline !important; }
.dashboard-compact-row .dashboard-wa-btn {
    width: 100% !important; min-width: 0 !important; height: auto !important;
    min-height: 2.1rem !important; border-radius: 0.6rem !important; padding: 0.3rem 0.6rem !important;
    gap: 0.4rem !important;
}
.dashboard-compact-row .wa-sent-badge {
    width: 100% !important; height: auto !important; border-radius: 0.6rem !important;
    padding: 0.3rem 0.6rem !important; gap: 0.4rem !important; font-size: 0.8rem;
}
.dashboard-compact-row .presence-btn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dashboard-compact-row .status-dropdown-trigger span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* La columna de acciones necesita algo más de ancho para que entren los
   controles; se lo saca al resto, que en el celular ya va apretado igual. */
@media screen and (max-width: 900px) {
    .dashboard-appointments-table .col-show-lg { width: 44%; min-width: 150px; }
}
@media screen and (max-width: 479px) {
    .dashboard-appointments-table .col-show-lg { width: 150px !important; min-width: 150px !important; }
}