/* ===== CORES DOS LEITOS ===== */
.bed-occupied { 
    background-color: #fecaca; 
    border-color: #ef4444; 
}

.bed-cleaning { 
    background-color: #fef08a; 
    border-color: #eab308; 
}

.bed-available { 
    background-color: #bbf7d0; 
    border-color: #22c55e; 
}

.bed-with-visit {
    background-color: #e0e7ff;
    border-color: #6366f1;
    position: relative;
}

.bed-with-visit::before {
    content: "👥 VISITA";
    position: absolute;
    top: 2px;
    right: 4px;
    font-size: 8px;
    background: #6366f1;
    color: white;
    padding: 2px 4px;
    border-radius: 4px;
    font-weight: bold;
}

/* ===== ESTILOS DOS QUARTOS ===== */
.room-card.regular-room { 
    border-top: 4px solid #10b981; 
}

.room-card.isolation-room { 
    border-top: 4px solid #8b5cf6; 
}

.room-card.emergency-room { 
    border-top: 4px solid #f59e0b; 
}

.room-card {
    transition: all 0.3s ease;
}

.room-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

/* ===== ESTILOS DOS LEITOS ===== */
.bed-card { 
    transition: all 0.2s ease-in-out; 
    cursor: pointer;
    position: relative;
}

.bed-card:hover { 
    transform: translateY(-2px); 
    box-shadow: 0 4px 10px rgba(0,0,0,0.08); 
}

.bed-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.bed-actions button {
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s;
    border: none;
    cursor: pointer;
    flex: 1;
    min-width: 60px;
}

.bed-actions button:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* ===== MODAIS ===== */
.modal { 
    transition: opacity 0.3s ease;
    backdrop-filter: blur(4px);
}

.modal.show {
    opacity: 1;
}

.modal.hide {
    opacity: 0;
}

/* ===== FORMULÁRIOS E VALIDAÇÃO ===== */
.form-error { 
    color: #ef4444; 
    font-size: 0.875rem; 
    margin-top: 0.25rem; 
    display: flex;
    align-items: center;
}

.form-error i {
    margin-right: 4px;
}

.form-success {
    color: #22c55e;
    font-size: 0.875rem;
    margin-top: 0.25rem;
    display: flex;
    align-items: center;
}

.form-success i {
    margin-right: 4px;
}

/* Estilos para campos de formulário */
.form-field {
    margin-bottom: 1rem;
}

.form-field label {
    display: block;
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: #374151;
}

.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    transition: all 0.2s;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-field input.error,
.form-field select.error {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* ===== TABELA RESPONSIVA ===== */
.responsive-table {
    border-collapse: collapse;
}

@media screen and (max-width: 768px) {
    .responsive-table thead { 
        display: none; 
    }
    
    .responsive-table tbody, 
    .responsive-table tr, 
    .responsive-table td { 
        display: block; 
        width: 100%; 
    }
    
    .responsive-table tr { 
        margin-bottom: 1rem; 
        border: 1px solid #ddd; 
        border-radius: 0.5rem; 
        padding: 1rem;
        background: white;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    .responsive-table td { 
        display: flex; 
        justify-content: space-between; 
        align-items: center; 
        text-align: right; 
        border-bottom: 1px solid #eee; 
        padding: 0.5rem 0; 
    }
    
    .responsive-table td:last-child { 
        border-bottom: none; 
    }
    
    .responsive-table td::before { 
        content: attr(data-label); 
        font-weight: bold; 
        text-align: left; 
        margin-right: 1rem;
        color: #374151;
        flex: 1;
    }
}

/* ===== BADGES E STATUS ===== */
.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.status-available {
    background-color: #dcfce7;
    color: #166534;
}

.status-occupied {
    background-color: #fecaca;
    color: #991b1b;
}

.status-cleaning {
    background-color: #fef3c7;
    color: #92400e;
}

.status-visit {
    background-color: #e0e7ff;
    color: #3730a3;
}

/* ===== BOTÕES ===== */
.btn {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    font-weight: 500;
    transition: all 0.2s;
    border: none;
    cursor: pointer;
    text-decoration: none;
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.btn:active {
    transform: translateY(0);
}

.btn-primary {
    background-color: #3b82f6;
    color: white;
}

.btn-primary:hover {
    background-color: #2563eb;
}

.btn-success {
    background-color: #22c55e;
    color: white;
}

.btn-success:hover {
    background-color: #16a34a;
}

.btn-danger {
    background-color: #ef4444;
    color: white;
}

.btn-danger:hover {
    background-color: #dc2626;
}

.btn-warning {
    background-color: #f59e0b;
    color: white;
}

.btn-warning:hover {
    background-color: #d97706;
}

.btn-secondary {
    background-color: #6b7280;
    color: white;
}

.btn-secondary:hover {
    background-color: #4b5563;
}

/* ===== ANIMAÇÕES ===== */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

.animate-slide-up {
    animation: slideInUp 0.3s ease-out;
}

.animate-slide-down {
    animation: slideInDown 0.3s ease-out;
}

.animate-fade-in {
    animation: fadeIn 0.3s ease-out;
}

.animate-pulse {
    animation: pulse 1s infinite;
}

.animate-shake {
    animation: shake 0.5s ease-in-out;
}

/* ===== CARDS E CONTAINERS ===== */
.stat-card {
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.stat-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transform: translateY(-2px);
}

.stat-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
}

/* ===== CONTROLES DE PERMISSÃO ===== */
.medical-only {
    display: none;
}

.user-medico .medical-only {
    display: block;
}

.reception-only {
    display: none;
}

.user-recepcao .reception-only {
    display: block;
}

/* ===== NOTIFICAÇÕES ===== */
.notification {
    position: fixed;
    top: 1rem;
    right: 1rem;
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    padding: 1rem;
    border-left: 4px solid #3b82f6;
    max-width: 300px;
    z-index: 1000;
    transform: translateX(100%);
    transition: transform 0.3s ease;
}

.notification.show {
    transform: translateX(0);
}

.notification.success {
    border-left-color: #22c55e;
}

.notification.error {
    border-left-color: #ef4444;
}

.notification.warning {
    border-left-color: #f59e0b;
}

/* ===== LOADING STATES ===== */
.loading {
    opacity: 0.6;
    pointer-events: none;
}

.spinner {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #3b82f6;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ===== MÁSCARAS DE INPUT ===== */
.input-phone {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3e%3cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'%3e%3c/path%3e%3c/svg%3e");
}

.input-cpf {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3e%3cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'%3e%3c/path%3e%3ccircle cx='12' cy='7' r='4'%3e%3c/circle%3e%3c/svg%3e");
}

/* ===== VISITAS ===== */
.visit-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 0.5rem;
    transition: all 0.2s;
}

.visit-card:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.visit-active {
    background: #fef3c7;
    border-color: #f59e0b;
}

.visit-time {
    font-family: 'Courier New', monospace;
    font-weight: bold;
}

/* ===== RESGUARDO ALERT ===== */
.resguardo-alert {
    background: #fef3c7;
    border: 1px solid #f59e0b;
    border-radius: 0.375rem;
    padding: 0.75rem;
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
}

.resguardo-alert i {
    color: #d97706;
    margin-right: 0.5rem;
}

/* ===== SCROLLBAR CUSTOMIZADA ===== */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* ===== UTILITÁRIOS ===== */
.text-overflow {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.clickable {
    cursor: pointer;
}

.unselectable {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.hidden {
    display: none !important;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ===== RESPONSIVIDADE ADICIONAL ===== */
@media (max-width: 640px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    .stat-card {
        padding: 1rem;
    }
    
    .bed-card {
        min-height: 100px;
    }
    
    .bed-actions button {
        font-size: 10px;
        padding: 3px 6px;
    }
    
    .modal .bg-white {
        margin: 1rem;
        max-width: calc(100vw - 2rem);
    }
}

@media (max-width: 480px) {
    .grid-cols-2 {
        grid-template-columns: 1fr;
    }
    
    .md\\:grid-cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* No seu arquivo css/styles.css */

/* Estilo para os inputs do formulário de evolução */
.form-input {
    width: 100%;
    padding: 8px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    margin-top: 4px;
    transition: border-color 0.2s;
}
.form-input:focus {
    outline: none;
    border-color: #3b82f6;
}

/* =================================================================== */
/* --- REGRAS DE IMPRESSÃO UNIFICADAS (PARA EVOLUÇÃO E PRESCRIÇÃO) --- */
/* =================================================================== */
@media print {
    /* --- CONFIGURAÇÃO GERAL DA IMPRESSÃO --- */
    
    /* 1. Esconde tudo na página por padrão. */
    body * {
        visibility: hidden;
    }

    /* 2. Torna visível APENAS o conteúdo que está dentro da folha a ser impressa.
       Isso funciona para AMBOS os modais porque ambos usam a mesma estrutura de ID. */
    #printable-evolution, #printable-evolution *,
    #printable-prescription, #printable-prescription * {
        visibility: visible;
    }
    
    /* 3. Posiciona o conteúdo a ser impresso para ocupar a página inteira. */
    #printable-evolution, #printable-prescription {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        margin: 0;
        padding: 0; /* O padding será controlado pela margem da @page */
        font-size: 11pt; /* Um bom tamanho de fonte para documentos impressos */
        color: black;
        background-color: white !important;
        box-shadow: none;
    }

    /* --- REGRAS ESPECÍFICAS POR TIPO DE DOCUMENTO --- */

    /* 4. Define o layout da página para a EVOLUÇÃO (Retrato - Portrait) */
    @page evolution-page {
        size: A4 portrait;
        margin: 1.5cm;
    }
    #printable-evolution {
        page: evolution-page;
    }

    /* 5. Define o layout da página para a PRESCRIÇÃO (Paisagem - Landscape) */
    @page prescription-page {
        size: A4 landscape;
        margin: 1cm;
    }
    #printable-prescription {
        page: prescription-page;
    }
    
    /* --- ESTILIZAÇÃO DOS CAMPOS DE FORMULÁRIO NA IMPRESSÃO --- */
    
    /* 6. Remove bordas e fundos dos inputs para um visual de "documento finalizado".
       Esta regra se aplica a todos os inputs e textareas dentro dos conteúdos imprimíveis. */
    #printable-evolution textarea.form-input, 
    #printable-evolution input#evo-weight,
    #printable-prescription textarea,
    #printable-prescription input#presc-patient-weight,
    #printable-prescription select#presc-patient-gender {
        border: none !important;
        resize: none; /* Impede que o textarea seja redimensionável na impressão */
        background-color: transparent !important;
    }
    
    /* 7. Garante que o conteúdo completo do textarea seja impresso, mesmo que tenha scroll. */
    textarea {
        overflow: visible !important;
        height: auto !important; /* Permite que o textarea cresça para caber o texto */
    }
}
/* ===== ESTILOS PARA NOTIFICAÇÕES (TOASTS) ===== */
.toast {
    max-width: 350px;
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    padding: 1rem;
    display: flex;
    align-items: center;
    border-left-width: 4px;
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.4s cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
.toast.show {
    opacity: 1;
    transform: translateX(0);
}
.toast.hide {
    opacity: 0;
    transform: translateX(100%);
}
.toast-success {
    background-color: #f0fdf4; /* green-50 */
    border-color: #22c55e; /* green-500 */
    color: #15803d; /* green-700 */
}
.toast-error {
    background-color: #fef2f2; /* red-50 */
    border-color: #ef4444; /* red-500 */
    color: #b91c1c; /* red-700 */
}
.toast-warning {
    background-color: #fefce8; /* yellow-50 */
    border-color: #eab308; /* yellow-500 */
    color: #a16207; /* yellow-700 */
}