.horarios-container { max-width: 1100px; margin: 0 auto; font-family: "Inter", sans-serif; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; } /* Cards mais compactos */ .day-card { background-color: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; padding: 8px; height: 220px; display: flex; flex-direction: column; justify-content: space-between; transition: all 0.2s ease; } .day-card:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06); } .day-card.checked { background-color: #1f2937; color: white; border-color: #4b5563; } /* Cabeçalho compacto */ .day-header { display: flex; justify-content: space-between; align-items: center; padding: 8px; border-radius: 6px; border-bottom: 1px solid #e5e7eb; cursor: pointer; } .day-header.checked { background-color: #1f2937; color: white; border-color: #4b5563; } .day-header label { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; } /* Seção de blocos mais compacta */ .blocks-section { margin-top: 6px; display: flex; flex-direction: column; gap: 6px; flex-grow: 1; overflow-y: auto; padding-right: 2px; } /* Blocos de tempo menores */ .time-block { background-color: #ffffff; border: 1px solid #e5e7eb; border-radius: 6px; padding: 6px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); transition: transform 0.15s, box-shadow 0.15s; } .time-block:hover { transform: translateY(-1px); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08); } .time-block.new { background-color: #eef2ff; border-color: #6366f1; } /* Inputs compactos */ .time-inputs { display: flex; flex-direction: column; gap: 6px; } .input-wrapper { position: relative; } .input-wrapper input { padding: 4px 24px 4px 4px; border: 1px solid #d1d5db; border-radius: 4px; width: 100%; font-size: 13px; outline: none; } .clock-icon { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); color: #9ca3af; font-size: 12px; } /* Botões compactos */ .btn-remove { margin-top: 6px; width: 100%; background-color: #ef4444; border: none; color: white; font-weight: bold; padding: 4px 0; border-radius: 4px; cursor: pointer; font-size: 12px; transition: background-color 0.15s; } .btn-remove:hover { background-color: #dc2626; } .btn-add { background-color: #10b981; color: white; font-weight: bold; border: none; padding: 6px 12px; border-radius: 6px; cursor: pointer; align-self: center; transition: background-color 0.15s; width: 100%; font-size: 13px; } .btn-add:hover { background-color: #059669; }