/* =========================================================
   WEBCAM METEOROLÓGICA · TRIANA
   Estética y tipografía coherentes con El Tiempo Sevilla
========================================================= */
.webcam-page > .contenedor { overflow: hidden; }

.wc-cabecera {
    margin-bottom: 26px;
    padding-bottom: 22px;
    border-bottom: 1px solid #dce7ed;
}
.wc-supra, .wc-kicker {
    margin: 0 0 8px;
    color: #6f96ad;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: .09em;
    text-transform: uppercase;
}
.wc-cabecera h1 {
    margin: 0;
    color: #294c62;
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.12;
    letter-spacing: -.025em;
}
/* Justificación de los dos párrafos introductorios en escritorio y móvil. */
.webcam-page .wc-cabecera > p.wc-entradilla {
    max-width: none;
    width: 100%;
    box-sizing: border-box;
    margin: 14px 0 0;
    color: #647b88;
    font-size: 14px;
    line-height: 1.72;
    text-align: justify !important;
    text-justify: inter-word;
    -webkit-hyphens: auto;
    hyphens: auto;
}
.wc-entradilla + .wc-entradilla { margin-top: 10px; }
.wc-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 295px;
    align-items: start;
    gap: 20px;
}
.wc-panel {
    min-width: 0;
    background: #fff;
    border: 1px solid #dfe9ee;
    border-radius: 14px;
    box-shadow: 0 3px 14px rgba(39, 72, 91, .055);
}
.wc-panel-camara { padding: 20px; border-top: 3px solid #7698b2; }
.wc-panel-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    min-height: 50px;
    margin-bottom: 16px;
}
.wc-panel-cabecera h2, .wc-tarjeta-cabecera h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 750;
    color: #31566c;
    line-height: 1.25;
    letter-spacing: -.015em;
}
.wc-panel-cabecera .wc-kicker { margin-bottom: 5px; }
.wc-estado {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    padding: 8px 11px;
    border-radius: 999px;
    border: 1px solid #d9e6ed;
    background: #f5f9fb;
    color: #69818d;
    font-size: 11px;
    font-weight: 750;
    white-space: nowrap;
}
.wc-estado-punto { width: 7px; height: 7px; border-radius: 50%; background: #aab8c2; }
.wc-estado[data-estado="bien"] { display: none; }
.wc-estado[data-estado="antigua"] { color: #9b742c; background: #fff9e9; border-color: #f0e2bd; }
.wc-estado[data-estado="antigua"] .wc-estado-punto { background: #d6a33f; }
.wc-estado[data-estado="error"] { color: #a24d4d; background: #fff4f2; border-color: #ecd5d0; }
.wc-estado[data-estado="error"] .wc-estado-punto { background: #d27b70; }
.wc-escena {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 854 / 480;
    overflow: hidden;
    border: 1px solid #d5e1e8;
    border-radius: 9px;
    background: linear-gradient(145deg, #e9f2f7, #c3d6e2);
}
.wc-escena > img {
    display: block;
    width: 100%;
    max-width: 854px;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    aspect-ratio: 854 / 480;
}
.wc-imagen-error[hidden] { display: none !important; }
.wc-imagen-error {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px;
    text-align: center;
    color: #526e7f;
    background: #f1f6f9;
}
.wc-imagen-error svg { width: 30px; height: 30px; stroke: currentColor; fill: none; stroke-width: 1.4; }
.wc-imagen-error strong { font-size: 15px; }
.wc-imagen-error span { font-size: 12px; }
.wc-pie-imagen {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 18px;
    padding: 12px 0 10px;
}
.wc-acciones { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-left: auto; }
.wc-boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    padding: 9px 12px;
    border: 1px solid #d6e4eb;
    border-radius: 8px;
    background: #f8fbfd;
    color: #4d728a;
    font: 750 12px/1 Arial, Helvetica, sans-serif;
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .15s;
}
.wc-boton svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.wc-boton:hover { background: #eaf3f8; border-color: #a9cadd; }
.wc-boton:active { transform: translateY(1px); }
.wc-boton:disabled { cursor: wait; opacity: .65; }
.wc-nota-camara {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 4px;
    padding: 11px 12px;
    border-radius: 8px;
    background: #f5f9fb;
    color: #718794;
}
.wc-nota-camara svg {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    margin-top: 1px;
    stroke: #729ab1;
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round;
}
.wc-nota-camara p { margin: 0; font-size: 11px; line-height: 1.65; }
/* Panel de observación: lenguaje visual del panel principal de ETS.
   Color, iconografía meteorológica, lectura destacada y métricas compactas. */
.wc-lateral { display: grid; gap: 17px; }
.wc-condiciones {
    overflow: hidden;
    border-radius: 17px;
    border: 1px solid #dce8ef;
    background: #fff;
    box-shadow: 0 2px 8px rgba(33, 73, 101, .04), 0 12px 30px rgba(33, 73, 101, .065);
    padding: 0;
}
.wc-tarjeta-cabecera {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 18px 15px;
    border-bottom: 1px solid #dbe7ee;
    background: linear-gradient(130deg, #e9f3fa 0%, #f8fbfd 72%, #fff 100%);
}
.wc-tarjeta-cabecera .wc-kicker { margin-bottom: 4px; color: #6c92a9; font-size: 10px; }
.wc-tarjeta-cabecera h2 { font-size: 18px; color: #22475e; line-height: 1.25; }
.wc-condiciones-insignia {
    display: grid;
    place-items: center;
    transform: translateY(9px); /* Centrado respecto al título, bajo el rótulo del observatorio. */
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border: 1px solid #d2e5ef;
    border-radius: 11px;
    background: rgba(255, 255, 255, .85);
}
.wc-condiciones-insignia svg {
    display: block;
    width: 28px;
    height: 28px;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.55;
}
.wc-insignia-sol, .wc-insignia-rayos { stroke: #d3a143; }
.wc-insignia-sol { fill: #fff4cf; }
.wc-insignia-nube { stroke: #547e99; fill: #fff; stroke-width: 1.65; }
/* Valores meteorológicos con el mismo peso tipográfico (700) empleado
   en el panel principal de Condiciones actuales. Se conserva el diseño
   compacto, los iconos y la jerarquía de etiquetas/unidades. */
.wc-temperatura {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    padding: 12px 17px;
    background: #fff;
    border-bottom: 1px solid #ecf1f4;
}
.wc-temperatura-icono {
    display: grid;
    place-items: center;
    transform: translateY(4px); /* Ajuste vertical solicitado. */
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #f9eeee;
    color: #c85f50;
}
.wc-temperatura-icono svg {
    display: block;
    width: 19px;
    height: 30px;
}
/* El mismo termómetro SVG que utilizamos en el panel, ahora a escala coherente. */
.wc-temperatura-icono .wc-termometro-contorno {
    fill: rgba(200, 95, 80, .035);
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linejoin: round;
}
.wc-temperatura-icono .wc-termometro-mercurio {
    fill: currentColor;
    stroke: none;
    opacity: .88;
}
.wc-temperatura-icono .wc-termometro-brillo {
    fill: rgba(255, 255, 255, .42);
    stroke: none;
}
.wc-temperatura-lectura { min-width: 0; flex: 1 1 auto; }
.wc-temperatura-label {
    display: block;
    color: #5c7686;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.3;
}
.wc-temperatura-valor {
    display: flex;
    align-items: baseline;
    gap: 3px;
    margin-top: 3px;
    white-space: nowrap;
}
.wc-temperatura-num {
    color: #1f2529;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
}
.wc-temperatura-unidad {
    color: #6d8491;
    font-size: 12px;
    font-weight: 500;
}
/* Extremos diarios con código cromático del panel de condiciones: mínima azul / máxima roja. */
/* Mínima y máxima en la misma línea visual, con su código cromático habitual. */
.wc-temperatura-extremos {
    flex: 0 0 83px;
    display: grid;
    align-content: center;
    gap: 7px;
    padding-left: 10px;
    border-left: 1px solid #e4edf2;
}
.wc-extremo { display: flex; flex-direction: column; gap: 2px; white-space: nowrap; }
.wc-extremo-etiqueta { color: #7c929d; font-size: 10px; line-height: 1.15; font-weight: 400; }
.wc-extremo-valor {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}
.wc-extremo-valor small { margin-left: 2px; font-size: 10px; font-weight: 500; }
.wc-extremo-min .wc-extremo-valor { color: #307dbb; }
.wc-extremo-max .wc-extremo-valor { color: #c35450; }
.wc-lista-datos { margin: 0; padding: 0 17px; }
.wc-lista-datos .wc-metrica {
    display: flex; align-items: center; justify-content: space-between;
    gap: 9px; min-height: 51px; padding: 8px 0;
    border-bottom: 1px solid #ecf1f4;
}
.wc-lista-datos dt { display: flex; align-items: center; gap: 9px; min-width: 0; font-size: 12px; color: #5c7686; }
.wc-metrica-icono {
    display: grid; place-items: center;
    flex: 0 0 34px; width: 34px; height: 34px;
    border-radius: 50%; background: #f0f6fa; color: #548eae;
}
.wc-metrica-icono svg {
    width: 21px; height: 21px; fill: none; stroke: currentColor;
    stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round;
}
.wc-metrica-humedad .wc-metrica-icono { color: #228fc8; background: #e9f5fc; }
.wc-metrica-humedad .wc-gota { fill: rgba(48, 154, 210, .24); }
.wc-metrica-humedad .wc-gota-brillo { stroke: #fff; stroke-width: 1.7; }
.wc-metrica-viento .wc-metrica-icono { color: #b85569; background: #faedf0; }
.wc-metrica-viento .wc-metrica-icono svg { stroke-width: 2.2; }
.wc-metrica-direccion .wc-metrica-icono { color: #265d91; background: #eaf1f9; }
.wc-metrica-direccion .wc-brujula-aro { fill: rgba(38, 93, 145, .07); stroke-width: 1.9; }
.wc-metrica-direccion .wc-brujula-aguja { fill: #3a84bd; stroke: #214e84; stroke-width: 1.5; }
/* Barómetro: escala SVG uniforme con el resto de métricas y trazo contrastado. */
.wc-metrica-presion .wc-metrica-icono { color: #3b617a; background: #e8f1f7; }
.wc-metrica-presion .wc-metrica-icono svg { width: 23px; height: 23px; stroke-width: 1.9; }
.wc-metrica-presion .wc-presion-centro { fill: currentColor; stroke: none; }
.wc-metrica-solar .wc-metrica-icono { color: #d69b1e; background: #fff6e6; }
.wc-metrica-solar .wc-sol-centro { fill: rgba(229, 164, 34, .22); stroke-width: 2; }
.wc-metrica-solar .wc-sol-rayos { stroke-width: 2; }
.wc-metrica-lluvia .wc-metrica-icono { color: #347fc7; background: #edf5fe; }
.wc-metrica-lluvia .wc-lluvia-nube { stroke: #6f9ab7; fill: #e5f0fa; }
.wc-metrica-lluvia .wc-lluvia-gotas { stroke: #2789d4; stroke-width: 2.4; }
.wc-lista-datos dd { margin: 0; text-align: right; font-size: 17px; color: #1f2529; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wc-lista-datos dd small { margin-left: 3px; font-size: 10px; color: #718895; font-weight: 500; }
.wc-datos-hora { margin: 13px 17px 15px; color: #7892a2; font-size: 10.5px; line-height: 1.5; }
.wc-datos-hora[data-antiguo="1"] { color: #a47e47; }
/* Dos accesos destacados e independientes; reconocibles como acciones. */
.wc-enlaces { display: grid; gap: 9px; margin: 0 16px 18px; }
.wc-link-mas {
    display: flex; align-items: center; justify-content: space-between; gap: 7px;
    min-height: 63px;
    padding: 10px 12px;
    border: 1px solid #c6dfeb; border-radius: 10px;
    background: linear-gradient(110deg, #eaf5fb 0%, #f8fcfe 100%);
    color: #285d7e;
    box-shadow: 0 2px 5px rgba(36, 88, 120, .055);
    font-size: 12.5px; font-weight: 650; line-height: 1.3; text-decoration: none;
    transition: background .16s, border-color .16s, box-shadow .16s, transform .16s;
}
.wc-link-mas + .wc-link-mas {
    border-color: #c9dfe5;
    background: linear-gradient(110deg, #eaf5f7 0%, #f9fcfd 100%);
}
.wc-link-mas:hover, .wc-link-mas:focus-visible {
    background: #dceef8; border-color: #87b7d0; color: #164f76;
    box-shadow: 0 4px 11px rgba(32, 97, 137, .14);
    transform: translateY(-1px); text-decoration: none;
}
.wc-link-mas + .wc-link-mas:hover, .wc-link-mas + .wc-link-mas:focus-visible {
    background: #e0f0f4; border-color: #95c2cf;
}
.wc-link-mas:focus-visible { outline: 2px solid #2a799e; outline-offset: 3px; }
.wc-enlace-contenido { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.wc-enlace-icono {
    display: inline-grid; place-items: center; flex: 0 0 38px;
    width: 38px; height: 38px; border-radius: 10px;
    border: 1px solid rgba(55, 127, 169, .12);
}
.wc-enlace-icono-grafico { color: #2478a7; background: #d7ebf6; }
.wc-enlace-icono-satelite { color: #2d7599; background: #d9ebef; }
.wc-enlace-icono svg {
    width: 24px; height: 24px; fill: none; stroke: currentColor;
    stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.wc-enlace-icono-satelite svg { width: 25px; height: 25px; stroke-width: 1.55; }
.wc-link-flecha {
    flex: 0 0 17px; width: 17px; height: 17px; fill: none;
    stroke: currentColor; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
    opacity: .85;
}
@media (max-width: 1130px) {
    .wc-layout { grid-template-columns: minmax(0, 1fr) 270px; gap: 14px; }
    .wc-panel-camara { padding: 16px; }
    .wc-tarjeta-cabecera { padding: 16px; }
    .wc-temperatura { padding: 12px 15px; }
    .wc-lista-datos { padding-left: 15px; padding-right: 15px; }
    .wc-datos-hora { margin-left: 15px; margin-right: 15px; }
    .wc-enlaces { margin-left: 15px; margin-right: 15px; }
    .wc-panel-cabecera { flex-wrap: wrap; }
}
@media (max-width: 880px) {
    .wc-layout { grid-template-columns: minmax(0, 1fr); }
    .wc-lateral { grid-template-columns: 1fr; gap: 14px; }
    .wc-cabecera { margin-bottom: 19px; }
    .wc-panel-cabecera { flex-wrap: nowrap; }
}
@media (max-width: 650px) {
    .wc-entradilla { font-size: 13px; line-height: 1.65; text-align: justify; }
    .wc-cabecera { padding-bottom: 16px; }
    .wc-panel-camara { padding: 12px; }
    .wc-panel-cabecera { min-height: 0; flex-wrap: wrap; margin-bottom: 12px; gap: 10px; }
    .wc-panel-cabecera h2 { font-size: 18px; }
    .wc-estado { font-size: 10px; padding: 7px 9px; }
    .wc-escena { border-radius: 7px; }
    .wc-pie-imagen { padding: 12px 2px 9px; }
    .wc-acciones { justify-content: flex-end; }
    .wc-lateral { grid-template-columns: 1fr; }
    .wc-temperatura-num { font-size: 30px; }
    .wc-temperatura-icono { flex-basis: 34px; width: 34px; height: 34px; }
    .wc-temperatura-icono svg { width: 19px; height: 30px; }
    .wc-temperatura-extremos { flex-basis: 90px; padding-left: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .wc-boton { transition: none; }
}


/* La cámara se muestra sólo después de aplicar las tres máscaras en el navegador.
   Evita revelar momentáneamente la fotografía original sin procesar. */
#wc-imagen[hidden] { display: none !important; }
.wc-sin-js { margin: 15px 0; color: #9b3d3d; font-size: 14px; }