/* ==========================================================================
   Moura · Coches compartidos
   Sistema de diseño de Terra Moura (paleta, tipografía y componentes).
   Fuentes y logos incluidos en la propia app: funciona sin depender de WordPress.
   ========================================================================== */

@font-face {
    font-family: 'GapSans';
    src: url('fonts/GapSans.ttf') format('truetype');
    font-weight: 400; font-display: swap;
}
@font-face {
    font-family: 'Nunito';
    src: url('fonts/nunito/Nunito-200.woff2') format('woff2');
    font-weight: 200; font-display: swap;
}
@font-face {
    font-family: 'Nunito';
    src: url('fonts/nunito/Nunito-400.woff2') format('woff2');
    font-weight: 400; font-display: swap;
}
@font-face {
    font-family: 'Nunito';
    src: url('fonts/nunito/Nunito-700.woff2') format('woff2');
    font-weight: 700; font-display: swap;
}
@font-face {
    font-family: 'Nunito';
    src: url('fonts/nunito/Nunito-800.woff2') format('woff2');
    font-weight: 800; font-display: swap;
}

:root {
    --tm-brown: #5a412d;
    --tm-brown-dark: #3d2c1f;
    --tm-orange: #FF6F3C;
    --tm-orange-dark: #e55a28;
    --tm-olive: #8A8D56;
    --tm-olive-dark: #6f7244;
    --tm-cream: #f5efe2;
    --tm-cream-soft: #fafaf6;
    --tm-muted: #8a7a66;
    --tm-mini: #b9a791;
    --tm-error: #c24d4d;
    --tm-line: rgba(90, 65, 45, 0.10);
    --tm-line-input: rgba(90, 65, 45, 0.20);
    --tm-shadow: 0 4px 20px rgba(90, 65, 45, 0.08);
    --tm-shadow-sm: 0 2px 12px rgba(90, 65, 45, 0.06);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: #ffffff;
    color: var(--tm-brown);
    font-family: 'Nunito', system-ui, sans-serif;
    font-weight: 200;
    font-size: 1rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2 {
    font-family: 'GapSans', 'Nunito', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transform: scaleX(1.1) scaleY(0.9);
    transform-origin: left center;
    margin: 0 0 0.75rem;
}
h1 { font-size: 2.4rem; }
h2 { font-size: 1.4rem; margin-top: 2rem; }

h3 {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    letter-spacing: -0.025em;
    font-size: 1.2rem;
    margin: 0 0 0.5rem;
}

p { margin: 0 0 0.75rem; }
a { color: var(--tm-brown); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--tm-orange-dark); }

/* === Cabecera === */
.tm-head {
    background: var(--tm-cream);
    border-bottom: 1px solid var(--tm-line);
}
.tm-head__in {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; max-width: 1100px; margin: 0 auto; padding: 1rem 1.5rem;
}
.tm-head__brand { display: flex; align-items: center; text-decoration: none; }
.tm-head__logo {
    display: block; height: 48px; width: auto; max-width: 100%;
}
.tm-head__nav { display: flex; align-items: center; gap: 1rem; }
.tm-navlink {
    font-weight: 700; font-size: 0.78rem; text-transform: uppercase;
    letter-spacing: 0.04em; text-decoration: none; color: var(--tm-brown);
}
.tm-navlink:hover { color: var(--tm-orange-dark); }
.tm-navlink--plain { background: none; border: none; cursor: pointer; font-family: inherit; padding: 0; }
.tm-inline { display: inline; margin: 0; }

/* === Contenedor === */
.tm-main { max-width: 1100px; margin: 0 auto; padding: 2rem 1.5rem 4rem; }

/* === Hero === */
.tm-hero {
    background: var(--tm-cream);
    border-radius: 14px;
    padding: 2.5rem 2rem;
    margin-bottom: 2rem;
}
.tm-hero__lead { max-width: 52ch; font-size: 1.05rem; }
.tm-hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.25rem; }

/* === Botones === */
.tm-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 48px; padding: 0.85rem 1.5rem;
    border: none; border-radius: 8px; cursor: pointer;
    font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 0.85rem;
    text-transform: uppercase; letter-spacing: 0.04em; text-decoration: none;
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
}
.tm-btn--cta {
    background: var(--tm-orange); color: #fff;
    border-radius: 10px; box-shadow: 0 4px 16px rgba(255, 111, 60, 0.35);
}
.tm-btn--cta:hover { background: var(--tm-orange-dark); color: #fff; }
.tm-btn--brown { background: var(--tm-brown); color: #fff; }
.tm-btn--brown:hover { background: var(--tm-brown-dark); color: #fff; }
.tm-btn--ghost {
    background: transparent; color: var(--tm-brown);
    border: 1.5px solid var(--tm-line-input);
}
.tm-btn--ghost:hover { background: var(--tm-cream); color: var(--tm-brown); }
.tm-btn--sm { min-height: 40px; padding: 0.6rem 1rem; font-size: 0.75rem; }
.tm-btn--wa {
    background: #25D366; color: #fff; border-radius: 10px;
    gap: 0.5rem; text-transform: none; letter-spacing: 0.01em; font-size: 0.95rem;
}
.tm-btn--wa:hover { background: #1da851; color: #fff; }
.tm-btn--wa.tm-btn--sm { font-size: 0.8rem; }
.tm-wa__icon { width: 20px; height: 20px; flex-shrink: 0; }
.tm-btn--full { width: 100%; }
.tm-btn:focus-visible {
    outline: none; box-shadow: 0 0 0 3px rgba(255, 111, 60, 0.15);
}
.tm-btn:active { transform: translateY(1px); }
.tm-btn:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

.tm-link-danger {
    background: none; border: none; padding: 0; cursor: pointer;
    font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 0.78rem;
    text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--tm-error); text-decoration: underline;
}
.tm-link-danger:hover { color: #8a2f2f; }

/* === Formularios === */
.tm-form { display: flex; flex-direction: column; gap: 1.25rem; }
.tm-field { display: flex; flex-direction: column; gap: 0.375rem; }
.tm-field > span {
    font-weight: 700; font-size: 0.78rem; text-transform: uppercase;
    letter-spacing: 0.04em; color: var(--tm-brown);
}
.tm-field > span em { font-style: normal; color: var(--tm-mini); text-transform: none; letter-spacing: 0; }
.tm-field small { font-size: 0.8rem; color: var(--tm-muted); }

input[type=text], input[type=email], input[type=password], input[type=tel],
input[type=date], input[type=time], input[type=number], input[type=search],
select, textarea {
    width: 100%; min-height: 48px; padding: 0.75rem 1rem;
    border: 1.5px solid var(--tm-line-input); border-radius: 10px;
    background: #fff; color: var(--tm-brown);
    font-family: 'Nunito', sans-serif; font-weight: 400; font-size: 1rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
textarea { min-height: 96px; resize: vertical; line-height: 1.5; }

/* iOS/Safari: los campos de fecha y hora tienen ancho intrínseco propio y se
   salen del contenedor aunque lleven width:100%. Hay que anular su apariencia
   nativa y permitir que encojan (min-width:0). */
input[type=date], input[type=time] {
    -webkit-appearance: none;
    appearance: none;
    min-width: 0;
    max-width: 100%;
    font-family: 'Nunito', sans-serif;
    text-align: left;
}
input[type=date]::-webkit-date-and-time-value { text-align: left; margin: 0; }
input[type=date]::-webkit-calendar-picker-indicator { margin-left: 0; padding: 0; }
/* En contenedores flex/grid un campo no puede encoger por debajo de su tamaño
   intrínseco si no se le baja el min-width. */
.tm-field { min-width: 0; }
.tm-field > input, .tm-field > select, .tm-field > textarea { min-width: 0; }
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--tm-orange);
    box-shadow: 0 0 0 3px rgba(255, 111, 60, 0.15);
}
/* minmax(0,1fr) en vez de 1fr: con 1fr, un campo de ancho intrínseco grande
   (los date/time nativos de iOS) ensancha su columna y desborda la rejilla. */
.tm-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; }
.tm-row > * { min-width: 0; }

.tm-fieldset { border: none; padding: 0; margin: 0; }
.tm-fieldset legend {
    font-weight: 700; font-size: 0.78rem; text-transform: uppercase;
    letter-spacing: 0.04em; padding: 0 0 0.5rem;
}
.tm-radios { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.tm-radio, .tm-check {
    display: inline-flex; align-items: center; gap: 0.5rem;
    min-height: 48px; padding: 0.5rem 1rem;
    border: 1.5px solid var(--tm-line-input); border-radius: 10px;
    cursor: pointer; font-size: 0.9rem; font-weight: 400;
}
.tm-radio:has(input:checked) {
    border-color: var(--tm-orange); background: var(--tm-cream);
    font-weight: 700;
}
.tm-radio input, .tm-check input { accent-color: var(--tm-orange); width: auto; min-height: 0; }

/* === Filtros === */
.tm-filters { margin-bottom: 1.5rem; }
.tm-filters__row {
    display: grid;
    grid-template-columns: 1fr 1.4fr 1fr auto auto;
    gap: 0.75rem; align-items: end;
}

/* === Paneles === */
.tm-panel {
    max-width: 480px; margin: 0 auto;
    background: #fff; border: 1px solid var(--tm-line);
    border-radius: 14px; box-shadow: var(--tm-shadow); padding: 2rem;
}
.tm-panel--wide { max-width: 680px; }
.tm-panel__lead { color: var(--tm-muted); }
.tm-alt { margin-top: 1.25rem; font-size: 0.9rem; text-align: center; }

/* === Tarjetas de viaje === */
.tm-count { font-size: 0.8rem; font-weight: 700; text-transform: uppercase;
            letter-spacing: 0.04em; color: var(--tm-mini); }
.tm-grid {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.25rem;
}
.tm-card {
    display: flex; flex-direction: column; gap: 0.75rem;
    background: #fff; border: 1px solid var(--tm-line);
    border-radius: 14px; box-shadow: var(--tm-shadow-sm); padding: 1.5rem;
    transition: box-shadow 0.2s ease, transform 0.15s ease;
}
.tm-card:hover { box-shadow: var(--tm-shadow); transform: translateY(-2px); }
.tm-card__top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.tm-card__route { margin: 0; font-size: 1.1rem; }
.tm-card__notes { font-size: 0.9rem; color: var(--tm-muted); margin: 0; }
.tm-card .tm-btn { margin-top: auto; }

.tm-tag {
    font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.06em; padding: 0.3rem 0.6rem; border-radius: 6px;
}
.tm-tag--ida    { background: #344129; color: #c2d5d9; }
.tm-tag--vuelta { background: #5a2d1f; color: #d9ca9c; }

.tm-badge {
    font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.04em; padding: 0.3rem 0.6rem; border-radius: 6px;
    background: var(--tm-cream); color: var(--tm-brown); white-space: nowrap;
}
.tm-badge--open   { background: rgba(138, 141, 86, 0.18); color: #4f5230; }
.tm-badge--ok     { background: rgba(138, 141, 86, 0.18); color: #4f5230; }
.tm-badge--full   { background: rgba(255, 111, 60, 0.15); color: var(--tm-orange-dark); }
.tm-badge--closed { background: rgba(90, 65, 45, 0.10); color: var(--tm-muted); }

.tm-pill {
    font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.04em; padding: 0.3rem 0.6rem; border-radius: 999px;
    background: var(--tm-orange); color: #fff;
}

/* === Meta (definiciones) === */
.tm-meta { display: grid; gap: 0.5rem; margin: 0; }
.tm-meta > div { display: flex; gap: 0.5rem; align-items: baseline; }
.tm-meta dt {
    font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--tm-mini); min-width: 4.5rem;
}
.tm-meta dd { margin: 0; font-size: 0.95rem; }
.tm-meta--lg { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.tm-meta--lg > div { flex-direction: column; gap: 0.125rem; }

/* === Iconos de huecos === */
/* Los iconos y el texto se centran entre sí en una línea de 20px, para que no
   "baile" la palabra respecto a las siluetas. */
.tm-seats {
    display: inline-flex; align-items: center; gap: 0.1875rem;
    flex-wrap: wrap; line-height: 1;
}
.tm-seat { display: inline-flex; align-items: center; }
.tm-seat svg { width: 18px; height: 18px; display: block; }
.tm-seat--free svg {
    fill: none; stroke: var(--tm-olive); stroke-width: 1.8;
    stroke-linecap: round; stroke-linejoin: round;
}
.tm-seat--taken svg { fill: var(--tm-mini); stroke: var(--tm-mini); stroke-width: 1.8; }
/* Alineación de la fila "Huecos".
   En las tarjetas (.tm-meta) la fila es horizontal → centrar en vertical.
   En el detalle (.tm-meta--lg) la fila es COLUMNA, así que align-items controla
   el eje horizontal y hay que forzar flex-start (si no, queda centrado y
   descuadrado respecto al resto de datos). */
.tm-meta__seats { align-items: center; }
.tm-meta--lg .tm-meta__seats { align-items: flex-start; }
.tm-meta__seats dt { line-height: 1.2; }
.tm-meta__seats dd { display: flex; align-items: center; min-height: 20px; }

/* === Extras de filtros y listas === */
.tm-filters__clear { margin: 0.75rem 0 0; font-size: 0.85rem; }
.tm-line__act {
    font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.04em; text-decoration: none; color: var(--tm-brown);
}
.tm-line__act:hover { color: var(--tm-orange-dark); }
.tm-req__hint {
    font-size: 0.85rem; color: var(--tm-muted);
    margin: 0.625rem 0 0; line-height: 1.5;
}

/* === Detalle === */
.tm-detail { max-width: 720px; }
.tm-back {
    display: inline-block; margin-bottom: 1rem;
    font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.04em; text-decoration: none; color: var(--tm-muted);
}
.tm-back:hover { color: var(--tm-orange-dark); }
.tm-detail__head { display: flex; gap: 0.5rem; margin-bottom: 0.75rem; }
.tm-notes {
    background: var(--tm-cream-soft); border: 1px solid var(--tm-line);
    border-radius: 14px; padding: 1.25rem 1.5rem; margin: 1.5rem 0;
}

/* === Solicitar plaza === */
.tm-ask {
    background: var(--tm-cream); border-radius: 14px;
    padding: 1.75rem 2rem; margin-top: 2rem;
}
.tm-ask h2 { margin-top: 0; }
.tm-ask .tm-field { margin-bottom: 1rem; }
.tm-fineprint { font-size: 0.85rem; color: var(--tm-muted); }

/* === Estado del pasajero === */
.tm-state {
    border-radius: 14px; padding: 1.5rem 1.75rem; margin-top: 2rem;
    border: 1px solid var(--tm-line); background: var(--tm-cream-soft);
}
.tm-state h3 { margin-top: 0; }
.tm-state--accepted { background: rgba(138, 141, 86, 0.14); border-color: rgba(138, 141, 86, 0.35); }
.tm-state--rejected, .tm-state--closed { background: rgba(90, 65, 45, 0.06); }
.tm-contact {
    font-weight: 700; font-size: 1rem;
    background: #fff; border: 1px solid var(--tm-line);
    border-radius: 10px; padding: 0.75rem 1rem; display: inline-block;
}

/* === Zona del conductor === */
.tm-owner { margin-top: 2.5rem; border-top: 1px solid var(--tm-line); padding-top: 1.5rem; }
.tm-owner__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.tm-owner__bar h2 { margin: 0; }
.tm-owner__acts { display: flex; gap: 0.5rem; }
.tm-reqs { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.75rem; }
.tm-req {
    background: #fff; border: 1px solid var(--tm-line);
    border-left: 4px solid var(--tm-mini);
    border-radius: 10px; padding: 1rem 1.25rem;
}
.tm-req--pending  { border-left-color: var(--tm-orange); }
.tm-req--accepted { border-left-color: var(--tm-olive); }
.tm-req--rejected { border-left-color: rgba(90,65,45,0.2); opacity: 0.7; }
.tm-req__who { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.tm-req__state {
    font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.04em; color: var(--tm-muted);
}
.tm-req__msg { font-size: 0.9rem; color: var(--tm-muted); margin: 0.5rem 0; }
.tm-req__acts { display: flex; gap: 0.5rem; margin-top: 0.75rem; }

/* === Mi zona === */
.tm-dash__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.tm-dash__head h1 { margin: 0; }
.tm-list { list-style: none; margin: 0.75rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.tm-line {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    background: #fff; border: 1px solid var(--tm-line);
    border-radius: 10px; padding: 1rem 1.25rem;
}
.tm-line__title { font-weight: 700; text-decoration: none; }
.tm-line__title:hover { color: var(--tm-orange-dark); }
.tm-line__meta { margin: 0.125rem 0 0; font-size: 0.85rem; color: var(--tm-muted); }
.tm-line__right { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.tm-account { margin-top: 3rem; border-top: 1px solid var(--tm-line); padding-top: 1.25rem; }
.tm-account summary {
    cursor: pointer; font-weight: 700; font-size: 0.78rem;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.tm-danger { margin-top: 2rem; border-top: 1px solid var(--tm-line); padding-top: 1.25rem; }

/* === Vacío y avisos === */
.tm-empty {
    text-align: center; background: var(--tm-cream);
    border-radius: 14px; padding: 3rem 2rem;
}
.tm-muted { color: var(--tm-muted); font-size: 0.95rem; }
.tm-flash {
    border-radius: 10px; padding: 0.85rem 1.25rem; margin-bottom: 1.25rem;
    font-size: 0.95rem; border: 1px solid transparent;
}
.tm-flash--ok    { background: rgba(138, 141, 86, 0.15); border-color: rgba(138, 141, 86, 0.35); }
.tm-flash--info  { background: var(--tm-cream); border-color: var(--tm-line); }
.tm-flash--error { background: rgba(194, 77, 77, 0.10); border-color: rgba(194, 77, 77, 0.35); color: #8a2f2f; }

/* === Pie === */
.tm-foot {
    background: #000; color: #fff;
    padding: 2.5rem 1.5rem; text-align: center;
}
.tm-foot p { margin: 0 0 0.5rem; }
.tm-foot a { color: #fff; }
.tm-foot__small { font-size: 0.85rem; color: rgba(255,255,255,0.7); }
.tm-foot__brand { display: inline-block; margin-bottom: 1.25rem; }
.tm-foot__brand img { display: block; height: 100px; width: auto; max-width: 100%; }

/* === Responsive ===
   Regla de fondo: nada puede desbordar en horizontal. Los títulos usan GapSans
   con scaleX(1.1), que hace el texto ~10% más ancho que su caja; en móvil se
   quita esa transformación (si no, el h1 se sale de la pantalla). */

html, body { max-width: 100%; overflow-x: hidden; }

/* Ningún contenido largo (rutas, emails, notas) puede romper el ancho */
h1, h2, h3, p, dd, .tm-card__route, .tm-contact, .tm-line__title {
    overflow-wrap: break-word;
    word-break: break-word;
}
img, svg { max-width: 100%; }

@media (max-width: 992px) {
    .tm-filters__row { grid-template-columns: 1fr 1fr; }
    .tm-filters__row > .tm-btn { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
    h1, h2 { transform: none; }            /* evita el desborde por scaleX */
    h1 { font-size: 1.75rem; letter-spacing: 0.02em; }
    h2 { font-size: 1.25rem; }
    .tm-main { padding: 1.5rem 1rem 3rem; }
    .tm-hero { padding: 1.75rem 1.25rem; }
    .tm-hero__lead { font-size: 1rem; }
    .tm-panel { padding: 1.5rem; }
    .tm-row { grid-template-columns: minmax(0, 1fr); }
    .tm-filters__row { grid-template-columns: 1fr; }
    .tm-grid { grid-template-columns: 1fr; }
    .tm-meta--lg { grid-template-columns: 1fr 1fr; }

    /* Cabecera: logo arriba y navegación en su propia fila, sin apretujarse */
    .tm-head__in { flex-wrap: wrap; gap: 0.75rem; padding: 0.75rem 1rem; }
    .tm-head__logo { height: 40px; }
    .tm-head__nav { width: 100%; gap: 0.75rem; justify-content: space-between; }
    .tm-navlink { font-size: 0.74rem; }
    .tm-head__nav .tm-btn--sm { padding: 0.5rem 0.85rem; font-size: 0.7rem; min-height: 40px; }

    .tm-line { flex-direction: column; align-items: flex-start; }
    .tm-line__right { flex-wrap: wrap; }
    .tm-owner__bar { flex-direction: column; align-items: flex-start; }
    .tm-owner__acts { width: 100%; }
    .tm-detail__head { flex-wrap: wrap; }
    .tm-card__top { flex-wrap: wrap; }
}

@media (max-width: 576px) {
    h1 { font-size: 1.5rem; }
    .tm-hero__actions { flex-direction: column; }
    .tm-hero__actions .tm-btn { width: 100%; }
    .tm-head__logo { height: 34px; }
    .tm-foot { padding: 2rem 1rem; }
    .tm-foot__brand img { height: 72px; }
    .tm-meta--lg { grid-template-columns: 1fr; gap: 0.875rem; }
    .tm-req__acts { flex-wrap: wrap; }
    .tm-req__acts .tm-btn { flex: 1 1 auto; }
    .tm-owner__acts { flex-wrap: wrap; }
    .tm-owner__acts > * { flex: 1 1 auto; }
    .tm-owner__acts .tm-btn { width: 100%; }
    .tm-ask, .tm-state { padding: 1.25rem; }
    .tm-contact { display: block; }
    .tm-notes { padding: 1rem 1.25rem; }
}

@media (max-width: 380px) {
    h1 { font-size: 1.3rem; }
    .tm-head__nav { gap: 0.5rem; }
    .tm-navlink { font-size: 0.68rem; }
    .tm-head__nav .tm-btn--sm { padding: 0.5rem 0.6rem; font-size: 0.64rem; }
}