/* styles.css — Hoja de estilos compartida "Ortiz Kutz" */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;600&display=swap');

:root {
    --bg:        #0B0B0B;
    --text:      #FFFFFF;
    --muted:     #9a9a9a;
    --accent:    #E11D2A;
    --card:      #161616;
    --card-bd:   #2a2a2a;
    --btn2-bd:   #333333;
    --radius:    16px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 400;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* Enlaces: sin subrayado ni azul por defecto */
a { text-decoration: none; color: inherit; }

/* Contenedor centrado, mobile-first */
.container {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    padding: 24px 20px 40px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Tipografía de cartel */
.anton {
    font-family: 'Anton', 'Inter', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.accent { color: var(--accent); }
.muted  { color: var(--muted); }

/* Etiqueta pequeña */
.eyebrow {
    font-family: 'Anton', sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--accent);
    font-size: 14px;
}

/* Títulos */
h1.brand {
    font-family: 'Anton', sans-serif;
    text-transform: uppercase;
    font-size: 64px;
    line-height: 0.95;
    margin: 8px 0;
    letter-spacing: 1px;
}

h2.title {
    font-family: 'Anton', sans-serif;
    text-transform: uppercase;
    font-size: 34px;
    letter-spacing: 1px;
    margin-bottom: 24px;
}

.subtitle {
    color: var(--muted);
    font-size: 16px;
    margin-bottom: 32px;
}

/* Botones */
.btn {
    display: block;
    width: 100%;
    text-align: center;
    text-decoration: none;
    font-family: 'Anton', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 20px;
    padding: 18px 20px;
    border-radius: var(--radius);
    cursor: pointer;
    transition: opacity 0.15s ease, background 0.15s ease;
}

.btn:active { opacity: 0.85; }

.btn-primary {
    background: var(--accent);
    color: #FFFFFF;
    border: none;
}

.btn-secondary {
    background: transparent;
    color: #FFFFFF;
    border: 1px solid var(--btn2-bd);
}

.btn + .btn { margin-top: 14px; }

/* Tarjetas */
.card {
    background: var(--card);
    border: 1px solid var(--card-bd);
    border-radius: var(--radius);
    padding: 18px 20px;
}

.card + .card { margin-top: 14px; }

/* Enlace volver / flecha */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    text-decoration: none;
    font-size: 15px;
    margin-bottom: 24px;
}

.back-link:hover { color: var(--text); }

.back-link .arrow { font-size: 20px; line-height: 1; }

/* Bloques de info (nosotros) */
.intro {
    color: var(--muted);
    font-size: 16px;
    margin-bottom: 24px;
}

.info-block {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.info-block .icon {
    font-size: 22px;
    line-height: 1.3;
}

.info-block .info-label {
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 2px;
}

.info-block .info-text {
    color: var(--muted);
    font-size: 15px;
}

/* Redes sociales */
.social-title {
    font-family: 'Anton', sans-serif;
    text-transform: uppercase;
    font-size: 22px;
    letter-spacing: 1px;
    margin-bottom: 14px;
}

.social-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.social-link {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text);
    text-decoration: none;
    background: var(--card);
    border: 1px solid var(--card-bd);
    border-radius: var(--radius);
    padding: 14px 16px;
    font-size: 15px;
    transition: border-color 0.15s ease;
}

.social-link:hover { border-color: var(--accent); }

.social-link .icon { font-size: 20px; }

/* Utilidades de espaciado */
.spacer       { flex: 1 1 auto; }
.mt-auto      { margin-top: auto; }
.stack        { display: flex; flex-direction: column; }
.mb-16        { margin-bottom: 16px; }
.mb-24        { margin-bottom: 24px; }

/* ===== Tarjeta de servicio como enlace ===== */
.bcard {
    display: block;
    background: #161616;
    border: 1px solid #2a2a2a;
    border-radius: 16px;
    color: #fff;
    text-decoration: none;
    transition: border-color .15s;
}
.bcard:hover { border-color: #E11D2A; }
.bcard .nombre { color: #fff; }
.bcard .precio { color: #E11D2A; }

/* Fila interior: nombre a la izquierda, precio a la derecha */
.service-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
}
.service-info .service-name {
    font-size: 18px;
    font-weight: 600;
}
.service-info .service-duration {
    color: var(--muted);
    font-size: 14px;
    margin-top: 4px;
}
.service-price {
    font-family: 'Anton', sans-serif;
    font-size: 26px;
    white-space: nowrap;
}

/* ===== Disponibilidad de días y horas ===== */
.av {
    display: block;
    background: rgba(63,185,80,.12);
    border: 1px solid #3FB950;
    color: #7EE787;
    border-radius: 12px;
    text-decoration: none;
    transition: background .15s;
}
.av:hover { background: rgba(63,185,80,.22); }

.full {
    display: block;
    background: rgba(248,81,73,.10);
    border: 1px solid #F85149;
    color: #F8918C;
    opacity: .75;
    border-radius: 12px;
    cursor: not-allowed;
}

/* Días: lista en columna, con padding interior */
.dia-list { display: flex; flex-direction: column; gap: 12px; }
.dia-list .av,
.dia-list .full {
    padding: 14px 16px;
    font-size: 16px;
    text-transform: capitalize;
}

/* Horas: rejilla de 3 columnas, centradas */
.hours-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.hours-grid .av,
.hours-grid .full {
    padding: 12px 0;
    text-align: center;
    font-size: 17px;
    letter-spacing: .5px;
}

/* Leyenda con puntos de color */
.leyenda {
    display: flex;
    gap: 18px;
    font-size: 12px;
    color: #9a9a9a;
    margin: 10px 0 16px;
}
.leyenda .dot-av::before   { content: '●'; color: #3FB950; margin-right: 6px; }
.leyenda .dot-full::before { content: '●'; color: #F85149; margin-right: 6px; }

/* ===== Resumen ===== */
.summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid var(--card-bd);
}
.summary-row:first-child { padding-top: 0; }
.summary-row:last-child  { padding-bottom: 0; border-bottom: none; }
.summary-row .label { color: var(--muted); }
.summary-row .value { font-weight: 600; text-align: right; }
.summary-row .value.price {
    font-family: 'Anton', sans-serif;
    color: var(--accent);
    font-size: 22px;
}

/* Aviso */
.notice {
    background: #1a1414;
    border: 1px solid rgba(225, 29, 42, 0.4);
    color: var(--muted);
    border-radius: 12px;
    padding: 14px 16px;
    font-size: 14px;
    margin-bottom: 16px;
}
.notice a { color: var(--accent); }

/* ===== Formulario (tema oscuro) ===== */
.field { margin-bottom: 16px; }
.field label {
    display: block;
    color: #9a9a9a;
    font-size: 13px;
    margin-bottom: 6px;
}
.field input {
    width: 100%;
    background: #161616;
    border: 1px solid #2a2a2a;
    color: #fff;
    border-radius: 12px;
    padding: 14px;
    font-family: 'Inter', sans-serif;
    font-size: 16px; /* 16px evita el zoom automático en iOS al enfocar */
}
.field input::placeholder { color: #666; }
.field input:focus {
    outline: none;
    border-color: #E11D2A;
}

button.btn {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
}

/* ===== Pantalla de confirmación ===== */
.text-center { text-align: center; }

.confirm-icon {
    width: 84px;
    height: 84px;
    margin: 8px auto 24px;
    border-radius: 50%;
    background: rgba(63, 185, 80, .15);
    border: 2px solid #3FB950;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===== Login del panel ===== */
.auth {
    max-width: 360px;
    justify-content: center;
}
.auth-brand {
    font-family: 'Anton', sans-serif;
    text-transform: uppercase;
    font-size: 44px;
    line-height: 1;
    letter-spacing: 1px;
    text-align: center;
}
.auth-sub {
    color: var(--muted);
    text-align: center;
    margin: 8px 0 28px;
    font-size: 15px;
}

/* ===== Panel / Agenda ===== */
.panel-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}
.panel-top .title { margin-bottom: 4px; }
.salir {
    color: var(--muted);
    font-size: 14px;
    white-space: nowrap;
}
.salir:hover { color: var(--text); }

.card-title {
    font-family: 'Anton', sans-serif;
    text-transform: uppercase;
    font-size: 24px;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.agenda-dia {
    text-transform: capitalize;
    font-weight: 600;
    color: var(--text);
    font-size: 15px;
    margin: 18px 0 4px;
}
.agenda-dia:first-of-type { margin-top: 6px; }

.cita {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--card-bd);
}
.cita:last-child { border-bottom: none; }

.cita-hora {
    font-family: 'Anton', sans-serif;
    color: var(--accent);
    font-size: 20px;
    min-width: 56px;
}
.cita-info { flex: 1; min-width: 0; }
.cita-info .cliente { font-weight: 600; }
.cita-info .meta {
    color: var(--muted);
    font-size: 13px;
    margin-top: 2px;
}

.cita form { margin: 0; }
.btn-cancel {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    border: 1px solid var(--btn2-bd);
    color: var(--muted);
    border-radius: 10px;
    padding: 8px 12px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color .15s, color .15s;
}
.btn-cancel:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.empty {
    color: var(--muted);
    font-size: 15px;
    padding: 8px 0;
}

/* ===== Selector de vista (pestañas) ===== */
.tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
}
.tab {
    flex: 1;
    text-align: center;
    padding: 10px 0;
    border-radius: 12px;
    border: 1px solid var(--btn2-bd);
    color: var(--muted);
    font-family: 'Anton', sans-serif;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-size: 15px;
}
.tab.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

/* ===== Navegación de fechas ===== */
.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 16px;
}
.nav-btn {
    color: var(--muted);
    padding: 8px 12px;
    border: 1px solid var(--btn2-bd);
    border-radius: 10px;
    font-size: 14px;
    white-space: nowrap;
}
.nav-btn:hover { color: var(--text); border-color: var(--text); }
.nav-center { flex: 1; text-align: center; min-width: 0; }
.nav-label {
    font-weight: 600;
    text-transform: capitalize;
    font-size: 15px;
}
.nav-hoy {
    display: inline-block;
    font-size: 12px;
    color: var(--accent);
    margin-top: 2px;
}

/* ===== Semana ===== */
.sin-citas {
    color: var(--muted);
    font-size: 13px;
    padding: 4px 0 10px;
}

/* ===== Calendario (mes) ===== */
.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}
.cal-dow {
    text-align: center;
    color: var(--muted);
    font-size: 12px;
    padding: 2px 0 4px;
}
.cal-cell {
    aspect-ratio: 1 / 1;
    border: 1px solid var(--card-bd);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    font-size: 14px;
    color: var(--text);
    text-decoration: none;
    overflow: hidden;
}
.cal-cell.empty { border: none; }
.cal-cell.today { border-color: var(--accent); }
a.cal-cell:hover { border-color: var(--text); }
.cal-num { font-weight: 600; }
.cal-count {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--muted);
}
.cal-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
}

/* ===== Cabecera de tarjeta con acción ===== */
.card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.card-head .card-title { margin-bottom: 0; }

.btn-nueva {
    background: var(--accent);
    color: #fff;
    font-family: 'Anton', sans-serif;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-size: 13px;
    padding: 9px 14px;
    border-radius: 10px;
    white-space: nowrap;
}
.btn-nueva:hover { opacity: .9; }

/* ===== Select (tema oscuro) ===== */
.field select {
    width: 100%;
    background: #161616;
    border: 1px solid #2a2a2a;
    color: #fff;
    border-radius: 12px;
    padding: 14px 38px 14px 14px;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239a9a9a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
}
.field select:focus { outline: none; border-color: #E11D2A; }

/* ===== Editor de horario ===== */
.dia-edit-title {
    font-family: 'Anton', sans-serif;
    text-transform: uppercase;
    font-size: 18px;
    letter-spacing: .5px;
    margin-bottom: 10px;
}
.franja-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.franja-row:last-child { margin-bottom: 0; }
.franja-label {
    width: 64px;
    flex-shrink: 0;
    color: var(--muted);
    font-size: 13px;
}
.franja-row input[type="time"] {
    flex: 1;
    min-width: 0;
    background: #161616;
    border: 1px solid #2a2a2a;
    color: #fff;
    border-radius: 10px;
    padding: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
}
.franja-row input[type="time"]:focus { outline: none; border-color: #E11D2A; }
.franja-sep { color: var(--muted); }

/* ===== Días bloqueados ===== */
.bloqueo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--card-bd);
}
.bloqueo:last-of-type { border-bottom: none; }
.bloqueo-fecha { font-weight: 600; text-transform: capitalize; }
.bloqueo-motivo { color: var(--muted); font-size: 13px; margin-top: 2px; }
.bloqueo form { margin: 0; }
.bloqueo-add {
    margin-top: 14px;
    padding-top: 16px;
    border-top: 1px solid var(--card-bd);
}

/* Aviso de éxito (verde) */
.notice-ok {
    border-color: rgba(63, 185, 80, .5);
    color: #7EE787;
}

/* ===== Servicios (admin) ===== */
.srv-row { display: flex; gap: 10px; }
.srv-row .field { flex: 1; }

.badge {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
    margin-bottom: 12px;
}
.badge-on {
    background: rgba(63, 185, 80, .15);
    color: #7EE787;
    border: 1px solid rgba(63, 185, 80, .5);
}
.badge-off {
    background: #1a1414;
    color: var(--muted);
    border: 1px solid var(--card-bd);
}
.srv-card.inactivo { opacity: .65; }
.srv-acciones { margin-top: 10px; }