fieldset .celda { padding-top: 10px; padding-right: 10px; } #misfichas { display: flex; flex-flow: wrap; gap: 32px; padding: 8px; } .mificha { border-radius: 3px; border: 1px solid var(--color_titulo); padding: 3px 5px; position: relative; max-width: calc(50% - 20px); min-width: calc(50% - 20px); display: flex; gap: 12px; flex-flow: wrap; } .mificha.on{ min-width: 100%; } .opsFicha { position: absolute; top: 0; right: 0; display: flex; flex-direction: column; align-items: flex-end; z-index: 999998; } .opsFicha .fa-ellipsis-v { display: block; width: 32px; height: 32px; text-align: center; margin: 8px; } .opsFicha .botones { gap: 0; background: #fff; z-index: 999999; border: 1px solid var(--color_titulo); } .opsFicha .botones .btn { margin: 0; border-bottom: 1px solid var(--color_titulo); background: #fff; color: darkgrey; border-radius: 0; display: flex; width: 100%; border: none; } .opsFicha .botones .btn:hover { color: #000; } .opsFicha .fa-ellipsis-v.on, .opsFicha .fa-ellipsis-v:hover { background: #ccc; } .opsFicha .botones .btn.cancelarConfirmar { background: #666; color: #fff; } .opsFicha .botones .btn.borrarConfirmar { color: red; } .opsFicha .botones .btn.borrarConfirmar:hover { background: red; color: #fff; } #medicaciones .fila{ margin: 10px 0; border-bottom: var(--color_enlace); } #medicaciones .flexv{ gap: 3px; } #medicaciones .flex{ flex-wrap: nowrap; align-items: center; } .cantidades .flex{ gap: 8px; } .btnCheck{ border: 1px solid; color: var(--color_enlace); border-radius: 5px; padding: 0 3px; display: block; font-size: small; cursor: pointer; } .btnCheck.on, .btnCheck:hover{ color: var(--color_pagina); background: var(--color_enlace); } .mificha .btn { font-size: 12px; display: inline-block; float: right; margin: 10px 24px; width: min-content; } .mificha .btn.borrar { margin: 0; display: contents; font-size: 24px; } .detalleFicha { font-size: 0.8em; margin-bottom: 10px; } .caja { float: left; height: 180px; margin: 5px; width: 120px; border: 1px solid #666; border-radius: 10px; position: relative; font-size: 0.7em; background: url(/es/imagenes/fichas/59a2fd0944b7bn_perfil.png) no-repeat; } .caja p { text-align: center; color: #fff; margin-top: 5px !important; width: 100px; position: absolute; top: 0; left: 50%; } .caja p span { left: -50%; position: relative; background: rgba(128, 128, 128, 0.8); border-radius: 5px; padding: 5px; display: table; } div.file { position: relative; width: 100%; height: 100%; border-radius: 5px; } input.adjuntarHistoria { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; opacity: 0; } span.archivo { margin: 0 auto; text-align: center; display: table; margin-top: 5px !important; display: none; position: absolute; left: 50%; top: 0; } span.archivo span.texto { display: table; position: relative; left: -50%; background: rgba(255, 255, 255, 0.8); padding: 5px !important; border-radius: 5px; } @media (max-width: 768px) { .caja { margin: 5px; } .bloque { padding-bottom: 20px; border-bottom: 1px dashed #9c9c9c; margin-bottom: 10px; } .mificha { min-width: 100%; max-width: 100%; } .mificha .cols.cols4{ -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; } .mificha fieldset legend{ font-size: 1.3em; } .bloque .fila, .bloque .celda { display: block; width: 100%; } .bloque .fila { border-left: 1px solid #dc4041; padding-left: 9px; } .fila.label { display: none; font-size: small; } #medicaciones .fila{ display: flex; flex-direction: column; border-bottom: 1px dashed; padding-bottom: 20px; gap: 10px; } #medicaciones .fila.label { display: table-row; } #medicaciones .celda { display: table-cell; } #medicaciones .label { font-size: 0.7em; } }